Question

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

例如，如果我打电话： this.$set(this.table.columnsFilters, 'name', 'bob')

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

不幸的是，如上所述无法设置值

Answer 1

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

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

More information about $set

Answer 2

如果我正确理解了这一点，则希望通过编程方式为某个字段设置过滤器。应该可以使用类似的方法。单击该按钮以编程方式更改过滤器...如果将该行更改为任何有效名称，它将按该名称进行过滤...将“鲍勃”更改为有效名称...（例如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 3

请参阅：https://github.com/xaksis/vue-good-table/issues/475

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

FIX::SendingTime sendingTime; // UtcTimeStamp
FIX::MDEntryTime mdEntryTime; //UtcTimeOnly
//get values from the message
int timeDiff = ?

如果要使用$ route查询参数完成此操作：

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

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

3 个答案: