Element-UI, как установить значение фильтра по умолчанию в фильтрах столбцов

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 по умолчанию. Я не могу найти никакой помощи в документе.


vuejs2 element-ui
person user1434702    schedule 08.02.2018    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Я сделал небольшую функцию взлома, чтобы заставить таблицу применять фильтр.

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);
person Sina Mirhejazi    schedule 05.02.2019
comment
Привет, Сина. Я применил этот метод, и он работает, но не полностью. Проблема в том, что галочки не проверяются. У вас есть идеи, как это исправить? - person ThibaultV; 15.02.2021
comment
@ThibaultV извините, я не прикасался к vuejs почти год, и я не помню этого спокойно. Я надеюсь, что вы можете найти ответ - person Sina Mirhejazi; 18.02.2021

arrow_upward
0
arrow_downward

Довольно старый вопрос, но я решил его, привязав свойство данных:

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

к атрибуту столбца таблицы :filtered-value.

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

arrow_upward

arrow_downward

person    schedule
comment
Пожалуйста, не публикуйте ответы только для кода, вместо этого попробуйте добавить некоторую информацию, объясняющую, почему ваш код помогает решить проблему ОП. - person Remy; 24.10.2019