Programing

요소-UI 열 필터에서 기본 필터 값을 설정하는 방법

c10106 2022. 4. 18. 21:12
반응형

요소-UI 열 필터에서 기본 필터 값을 설정하는 방법

요소-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처음에 디폴트(채무불이행으로서류상으로 어떤 도움도 찾을 수 없다.

나는 테이블이 필터를 적용하도록 하는 작은 해킹 기능을 만들었다.

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

꽤 오래된 질문이었지만 내가 해결한 방법은 데이터 속성을 바인딩하는 것이었다.

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

:value-value 테이블-열 속성에 연결.

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

참조URL: https://stackoverflow.com/questions/48677015/element-ui-how-to-set-default-filter-value-in-column-filters

반응형