以编程方式在 vue-good-table 上设置过滤器选项

Question

如何以编程方式更改 vue-good-table 中 UI 过滤器元素（输入、下拉列表等）中显示的值？

例如，如果我调用： this.$set(this.table.columnsFilters, 'name', 'bob')

我希望 HTML 输入字段“名称”中的值显示 bob。

不幸的是，我上面描述的设置值不起作用

Answer 1

编辑如果您使用的是2.16.0 或更高版本，您需要这样做：

CodePen for v2.16.0 +

// v2.16.0 or higher
...
changeFilter(field, newFilter) {
      let newCols = JSON.parse(JSON.stringify(this.columns));
      let found = newCols.find(c => {
        return c.field == field;
      });
      console.log(found);
      if (found) {
        if (found.hasOwnProperty("filterOptions")) {
            found.filterOptions.filterValue = newFilter;
            this.columns = newCols;
        } else {
          alert(`Column '${field}' does not have filtering configured!`);
        }
      } else {
        alert(`Field '${field}' does not exist!`);
      }
}

---

原始答案

如果我正确理解这一点，您想以编程方式为字段设置过滤器...这样的事情应该可以工作..单击按钮以编程方式更改过滤器...如果您将此行更改为任何有效名称，它将按该名称过滤...将“Bob”更改为有效名称...（如 Dan）...

<button 
  style="width:200px;" 
  @click.stop="changeFilter('name', 'Bob')"
>Click To Change Name Filter</button>

CodePen Mirror

const vm = new Vue({
  el: "#app",
  name: "my-component",
  data: {
    columns: [
      {
        label: "Name",
        field: "name",
        filterOptions: {
          enabled: true, // enable filter for this column
          placeholder: "Filter Name", // placeholder for filter input
          filterValue: "", // initial populated value for this filter
          filterDropdownItems: [], // dropdown (with selected values) instead of text input
          filterFn: this.columnFilterFn, //custom filter function that
          trigger: "enter" //only trigger on enter not on keyup
        }
      },
      {
        label: "Age",
        field: "age",
        type: "number"
      },
      {
        label: "Created On",
        field: "createdAt",
        type: "date",
        dateInputFormat: "YYYY-MM-DD",
        dateOutputFormat: "MMM Do YY"
      },
      {
        label: "Percent",
        field: "score",
        type: "percentage"
      }
    ],
    rows: [
      {
        id: 1,
        name: "John",
        age: 20,
        createdAt: "201-10-31:9: 35 am",
        score: 0.03343
      },
      {
        id: 2,
        name: "Jane",
        age: 24,
        createdAt: "2011-10-31",
        score: 0.03343
      },
      {
        id: 3,
        name: "Susan",
        age: 16,
        createdAt: "2011-10-30",
        score: 0.03343
      },
      {
        id: 4,
        name: "Bob",
        age: 55,
        createdAt: "2011-10-11",
        score: 0.03343
      },
      {
        id: 5,
        name: "Dan",
        age: 40,
        createdAt: "2011-10-21",
        score: 0.03343
      },
      {
        id: 6,
        name: "John",
        age: 20,
        createdAt: "2011-10-31",
        score: 0.03343
      }
    ]
  },
  methods: {
    clearFilter(field) {
      try {
        let found = this.columns.find((c) => {
          return c.field == field
        });
        found.filterOptions.filterValue = "";
      } catch {
        alert(`Unable to clear ${field} filter`)
      }
    },
    changeFilter(field, newFilter) {
      let found = this.columns.find((c) => {
        return c.field == field
      });
      if(found) {
        if(found.hasOwnProperty("filterOptions")) {
          if(found.filterOptions.hasOwnProperty("filterValue")) {
            found.filterOptions.filterValue = newFilter;
          } else {
            alert(`Column '${field}' does not have filterValue property!`)
          }          
        } else {
          alert(`Column '${field}' does not have filtering configured!`)
        }
      } else {
        alert(`Field '${field}' does not exist!`)
      }
    }
  }
});

<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.15.3/dist/vue-good-table.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vue-good-table@2.12.2/dist/vue-good-table.css" rel="stylesheet"/>

<div id="app">
  <div>
    <div style="margin:10px 10px 10px 10px;">
      <button 
        style="width:200px;" 
        @click.stop="changeFilter('name', 'Bob')"
      >Click To Change Name Filter</button>
      <button 
        style="width:200px;" 
        @click.stop="clearFilter('name')"
      >Clear Name Filter</button>
    </div>
    <vue-good-table :columns="columns" :rows="rows" />
  </div>
</div>

Answer 2

Vue 无法检测到正常的属性添加（例如this.myObject.newProperty = 'hi'）

因此，使用this.$set(this.table.columnsFilters, 'name', 'bob') 代替您的代码。

More information about $set

Answer 3

见：https://github.com/xaksis/vue-good-table/issues/475

版本 >= 2.17.5 的官方推荐方法：

this.$set(this.columns[foundIndex].filterOptions, 'filterValue', value);

如果您想使用 $route 查询参数来完成：

for (var key in this.$route.query){
    var field = key;
    let foundIndex = this.columns.findIndex((c) => {
      return c.field == field
    });

    if (foundIndex !== -1 ){
      this.$set(this.columns[foundIndex].filterOptions, 'filterValue', this.$route.query[key]);
    }
}