반응형
요소-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>
반응형
'Programing' 카테고리의 다른 글
HttpOnly 쿠키 기반 인증 및 세션 관리를 지원하는 단일 페이지 응용 프로그램 (0) | 2022.04.19 |
---|---|
요소-UI 열 필터에서 기본 필터 값을 설정하는 방법 (0) | 2022.04.18 |
vue.js 구성 요소 템플릿에 소품이 있는지 확인하십시오. (0) | 2022.04.18 |
Java.time 간 변환.LocalDateTime 및 Java.util.날짜 (0) | 2022.04.18 |
Axios 및 VueJS, 함수(응답)가 목록을 설정하지 않음 (0) | 2022.04.18 |