Wispik

Сделаем описания столбцов, по которым допускается фильтрация, и способов фильтрации - имя, русифицированный вариант имени (чтобы показывать его в select'ах), и, у столбцов, тип данных:

data: () => ({
  filterColumns: [
    [     'name',        'имя', 'string' ],
    [    'count', 'количество', 'number' ],
    [ 'distance', 'расстояние', 'number' ],
  ],
  operations: [
    [    'equal',    'равно' ],
    [ 'contains', 'содержит' ],
    [  'greater',   'больше' ],
    [     'less',   'меньше' ],
  ],
  ...

Тип данных указываем потому, что значения различных типов сравниваются по-разному. Кстати, определим, как именно:

data: () => ({
  types: {
    string: {
      equal: (a, b) => a.toLowerCase() === b,
      contains: (a, b) => a.toLowerCase().includes(b),
      greater: (a, b) => a.toLowerCase() > b,
      less: (a, b) => a.toLowerCase() < b,
    },
    number: {
      equal: (a, b) => a === +b,
      contains: (a, b) => `${a}`.includes(b),
      greater: (a, b) => a > +b,
      less: (a, b) => a < +b,
    },
  },
  ...

На основе описаний столбцов и способов фильтрации создадим select'ы:

<select v-model="column">
  <option v-for="n in filterColumns" :value="n[0]">{{ n[1] }}</option>
</select>
<select v-model="operation">
  <option v-for="n in operations" :value="n[0]">{{ n[1] }}</option>
</select>

Наконец, собственно фильтрация - конечно же оформляем в виде вычисляемого свойства. По имени столбца, по которому надо фильтровать, извлекаем его описание и, соответственно, тип его данных. На основе типа данных и способа фильтрации извлекаем функцию фильтрации. Если таковая существует, и значение по которому надо фильтровать непустое, то выполняем фильтрацию, в противном случае возвращаем полные данные:

computed: {
  filteredItems() {
    const { items, column } = this;
    const type = this.filterColumns.find(n => n[0] === column)?.[2];
    const filterFn = this.types[type]?.[this.operation];
    const filterVal = this.filterVal.toLowerCase();

    return filterFn && filterVal
      ? items.filter(n => filterFn(n[column], filterVal))
      : items;
  },
  ...

https://jsfiddle.net/8df3z1un/1/

SELECT id, (SELECT SUM(pen.time) FROM penalty WHERE id = penalty.id GROUP BY penalty.id LIMIT 1) AS sum_pen
FROM user

Запись вида:

if xxx == ('a' or 'b' or 'c'):

свидетельствует о полном незнании языка Python. Соответственно, не зная языка, ничего хорошего написать не получится. Великое счастье, что этот код хотя бы не управляет ядерными боеголовками. Начинать надо с азов.

li:not(:first-child, :last-child)

или

li:not(:first-child):not(:last-child)

или

li {
  /* тут стили для всех элементов */
}
li:first-child,
li:last-child {
  /* здесь сбрасываете стили, установленные выше */
}

https://jsfiddle.net/6zxdwear/

в Гугле забанили да?
heroku, aws, azure и ещё куча вариантов.
а если немного "разориться", вариантов вообще охулиард.

Кривая Безье - это именно то, что тебе на самом деле надо для того, чтоб решить свою задачу.

clip-path - это то, что позволит использовать тебе Кривые Безье для стилизации своего элемента.

Тем, кто не хочет развиваться сюда

Никак.