vuejs2 - Element-UI 如何在列过滤器中设置默认过滤器值

Question

Element-ui 2.1.0 版本

<el-table-column
  prop="tag"
  label="Tag"
  width="100"
  :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"></el-table-column>

我想首先设置Office为默认值。我在文档中找不到任何帮助。

Answer 1

我做了一个小技巧来强制表格应用过滤器。

setDefaultFilter(colProp, filteredValue) {
  if (!this.$refs.tableRef) {
    throw new Error('Table should have a ref named tableRef.');
  }

  const typeColumn = this.$refs.tableRef.columns.find(col => col.property === colProp);

  typeColumn.filteredValue = filteredValue;

  this.$refs.tableRef.store.commit('filterChange', {
    column: typeColumn,
    values: filteredValue,
  });
  this.$refs.tableRef.store.updateAllSelected();
}

我在这样的mounted()功能中使用它：

const filteredValue = ['Private', 'Public'];

this.setDefaultFilter('type', filteredValue);

Answer 2

<el-table-column
  prop="tag"
  label="Tag"
  width="100"
  :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
  :filtered-value="['Office']"
></el-table-column>

Answer 3

相当老的问题，但我解决它的方法是绑定数据属性：

data() {
  return {
    checkedFilters: [],
  };
},

到 :filtered-value table-column 属性。

<el-table-column
  column-key="states"
  label="State"
  :filters="stateFilters"
  :filter-method="filterState"
  :filtered-value="checkedFilters"
  v-if="isDisplayed('State')"
>
</el-table-column>