时间戳

首页 > 解决方案 > Vue Good Table 过滤复合列

vue.js - Vue Good Table 过滤复合列

问题描述

我有一个 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>

列定义（我想显示设置了 Global 或 Mobile 标志的所有行）：

{
    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;
}

标签： vue.jsvue-good-table

解决方案

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

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>

推荐阅读