Quasar表列过滤

Question

1)有没有办法实现类似于数据表的类星表列过滤？https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

理想情况下，它将是一个自动填充文本字段，它将过滤表中的所有行。我有一个有25列的表，所以我想要一些健壮的东西。

2)数据过滤后台有什么建议吗？我应该调用带有过滤器的数据库，还是应该在客户端和过滤器客户端存储一个主列表？

Answer 1

查看新的quasar扩展QGrid，它允许列过滤器。

Github - https://github.com/pratik227/quasar-qgrid

演示- https://quasar-qgrid.netlify.com/

Answer 2

这可以用Lodash来完成。

下面的代码实现了带有select或text输入的过滤器。

当心，这只是客户端。

<template>
  <q-page padding>
      <div class="row q-my-lg">
          <div class="col-3">
          <q-select style="width:250px" filled v-model="dessert" :options="desserts" :label="dessert" stack-label dense @input="filterLocation"></q-select>
          </div>
          <div class="col-2">
            <q-input dense @input="searchByDessert" hint="search by dessert" v-model="dessertName" maxlength="25" ></q-input>
          </div>
      </div>
      <div class="row">
        <div class="col">
          <q-table
            title="Treats"
            :data="data"
            :columns="columns"
            row-key="name"
            :filter="filter"
            :filter-method="filterData"
          ></q-table>
        </div>
      </div>
  </q-page>
</template>

<script>

const lodash = require('lodash')

export default {
  name: 'PageIndex',
  data () {
    return {
      dessert: '',
      desserts: [],
      dessertName: '',
      filter: { value: '' },
      calorie: '',
      columns: [
        {
          name: 'name',
          required: true,
          label: 'Dessert (100g serving)',
          align: 'left',
          field: row => row.name,
          format: val => `${val}`,
          sortable: true
        },
        { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
        { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
        { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
        { name: 'protein', label: 'Protein (g)', field: 'protein' },
        { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
        { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
        { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }
      ],
      data: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          sodium: 87,
          calcium: '14%',
          iron: '1%'
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          sodium: 129,
          calcium: '8%',
          iron: '1%'
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          sodium: 337,
          calcium: '6%',
          iron: '7%'
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          sodium: 413,
          calcium: '3%',
          iron: '8%'
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          sodium: 327,
          calcium: '7%',
          iron: '16%'
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          sodium: 50,
          calcium: '0%',
          iron: '0%'
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          sodium: 38,
          calcium: '0%',
          iron: '2%'
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          sodium: 562,
          calcium: '0%',
          iron: '45%'
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          sodium: 326,
          calcium: '2%',
          iron: '22%'
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          sodium: 54,
          calcium: '12%',
          iron: '6%'
        }
      ],
      database: null
    }
  },
  mounted () {
    this.database = this.data
    const desserts = {}
    this.data.forEach(function (element) {
      desserts[element.name] = 1
    })
    this.desserts = Object.keys(desserts)
  },
  methods: {
    searchByDessert (val) {
      if (val === '') {
        this.data = this.this.database
        return this.data
      }
      const needle = val.toLowerCase()
      this.data = lodash.filter(this.database, function (object) {
        return object.name.toLowerCase().indexOf(needle) > -1
      })
    },
    filterLocation (value) {
      this.data = this.database
      this.filter = { value: value }
    },
    filterData () {
      if (this.data.length > 2 && this.filter.value) {
        return lodash.filter(this.data, function (o) {
          return o.name === this.filter.value
        }.bind(this)
        )
      } else {
        return this.data
      }
    }
  }
}
</script>