Question

我有一个vue-good-table，在这里我想稍微限制列并制作一些复合列，其中包含该行的多个属性。现在的问题是，filterFn使用列名来填充方法的数据参数。因此，我只能过滤我决定用作列名的那个。有没有办法像在sortFn中一样将整个行对象提供给filterFn？

模板：

<template v-if="props.column.field === 'flags'">
    <div v-if="props.row.isGlobal">Global</div>
    <div v-if="props.row.isMobile">Mobile</div>
</template>

列定义（我想显示设置了全局或移动标志的所有行）：

{
    label: 'Flags',
    field: 'flags',
    sortable: false,
    filterOptions: {
        enabled: true,
        filterDropdownItems: ['Global', 'Mobile'],
        filterFn: this.flagFilter,
    },
},

函数（未定义为不用作data的函数）：

public flagFilter(data, filterString) {
    if ('Global' === filterString) {
        return data.isGlobal;
    } else if ('Mobile' === filterString) {
        return data.isMobile;
    }
    return true;
}

Answer 1

由于我不认为有办法将整行放入过滤器函数中，因此可以将计算属性中的行映射到正确数据结构

const vm = new Vue({
  el: "#app",
  name: "my-component",
  data: {
    columns: [{
      label: "Flags",
      field: "flags",
      sortable: false,
      filterOptions: {
        enabled: true,
        filterDropdownItems: ["Global", "Mobile"]
      }
    }],
    rows: [{
        isGlobal: true
      },
      {
        isMobile: true
      }
    ]
  },
  computed: {
    actualRows() {
      return this.rows.map((r) => {
        if (r.isMobile) {
          r.flags = "Mobile"
        }

        if (r.isGlobal) {
          r.flags = "Global"
        }
        return r
      })
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-good-table@2.17.3/dist/vue-good-table.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-good-table@2.17.3/dist/vue-good-table.css">

<div id="app">
  <vue-good-table :columns="columns" :rows="actualRows">
  </vue-good-table>
</div>

Vue Good Table过滤复合列

1 个答案: