Element UI 표 구성 요소 기법:페이지 간 체크,페이지 간 통계 기능 을 간결 하 게 실현 하 는 방법
8880 단어 vue.jsx 기술 창고
Element UI 의 Table 구성 요 소 를 사용 할 때 이러한 업무 수요 에 직면 합 니 다.
표 데이터 의 모든 항목 은 체크 상 자 를 제공 해 야 합 니 다.페이지 를 전환 할 때 모든 페이지 에서 선택 한 데 이 터 를 기억 하여 서로 다른 페이지 에서 데 이 터 를 선택 하 는 기능 을 대량으로 제출 할 수 있 습 니 다.또한 표 아래 에서 선택 한 데이터 의 항목 수,무게,금액 등 을 실시 간 으로 통계 한다.
코너 분석
우 리 는 너무 복잡 한 논리 로 실현 할 수 있 는'시행 착 오 를 걷 게 될 것 이다.흔히 볼 수 있 는 커 브 길 은:
Vue 의 data 에 선택 한 데 이 터 를 저장 한 다음 table 의 selection-change 또는 select,select-all 이 벤트 를 기반 으로 선택 한 배열 의 데 이 터 를 동적 으로 수정 합 니 다.페이지 를 전환 할 때 현재 페이지 데 이 터 를 옮 겨 다 니 며 선택 한 배열 에 있 는 지 여 부 를 판단 합 니 다.있 으 면 toggleRow Selection 을 사용 하여 모든 데이터 의 체크 상 태 를 수 동 으로 설정 합 니 다.
상기 방식 이나 유사 한 방식 을 사용 하면 목 표를 실현 할 수 있 지만 고려 해 야 할 문제 가 너무 많 고 너무 번거롭다.예 를 들 어:
사실 이 는 기억 체크 와 통계 기능 을 너무 복잡 하 게 만 들 고 bug 가 나타 나 기 쉬 우 며 완전히 정리 하기 가 쉽 지 않다.
추천 솔 루 션:row-key,reserve-selection,@selection-change
Element UI 홈 페이지 는 상기 업무 장면 을 어떻게 실현 하 는 지 보 여 주 는 데 직접적인 demo 를 제공 하지 않 았 으 나 문서 에 서 는 일부 속성 과 방법 을 설정 함으로써 목 표를 간결 하 게 실현 할 수 있다 는 것 을 은연 중 에 드 러 냈 다.
table 의 두 속성 row-key,reserve-selection 과 하나의 이벤트 selection-change 를 바탕 으로 매우 간결 하 게 실현 할 수 있 습 니 다.
(1)el-table 에 row-key 속성 row-key 속성 을 연결 하 는 실제 역할 은 표지 표 의 줄 마다 데이터 가 어떤 속성 을 통 해 구별 되 는 지 하 는 것 입 니 다.일반적으로 id 는 흔히 볼 수 있 습 니 다.
<el-table :data="tableData" border row-key="id">el-table>
row-key 속성 을 연결 한 후 페이지 를 넘 더 라 도 페이지 데이터 의 id 가 다 르 기 때문에 구성 요 소 는 구분 하여 기억 을 실현 할 수 있 습 니 다.
(2)type=selection 의 el-table-column 에 reserve-selection 속성 reserve-selection 을 설정 하 는 역할 은 데이터 업데이트 후 선택 한 데 이 터 를 유지 하 는 것 입 니 다.체크 와 밀접 한 관 계 를 가지 기 때문에 type=selection 의 열 에 설정 해 야 합 니 다.
true 만 간단하게 연결 하면 됩 니 다.<el-table-column type="selection" width="55" :reserve-selection='true'>
el-table-column>
이 제 는 기억 체크 가 가능 하지만 체크 통 계 는 불가능 해 3 단계 가 더 필요 하 다.
(3)el-table 에 selection-change 이 벤트 를 연결 하 는 목적 은 선택 한 데 이 터 를 모두 저장 하여 선택 한 데 이 터 를 계산 하 는 데 있 습 니 다.앞의 두 단계 의 설정 이 있 습 니 다.selection-change 가 되 돌아 오 는 매개 변수 selection 은 모든 페이지 에서 선택 한 데이터 입 니 다.이것 은 우리 의 문 제 를 매우 간단하게 합 니 다.
<el-table :data="tableData" border row-key="id"
@selection-change="handleSelectionChange">el-table>
export default {
data(){
return {
tableData:[],
selectedData:[]
};
},
methods:{
handleSelectionChange(rows){
this.selectedData = rows;
}
}
(4)계산 속성 을 사용 하여 통 계 를 실현 하 는 것 은 세 번 째 단계 에서 알 수 있 듯 이 selected Data 는 모든 페이지 의 선택 한 데 이 터 를 저장 하기 때문에 우 리 는 계산 속성 을 사용 하여 selected Data 를 계산 하면 통 계 를 실현 할 수 있다.
export default {
data(){
return {...};
},
methods:{...},
computed:{
checkedWeight(){
let totalWeight = 0;
this.selectedData.forEach(item =>{
totalWeight += item.weight;
});
return totalWeight.toFixed(2);
}
}
}
이후 보기 에 귀속 계산 속성 을 완성 할 수 있 습 니 다.
좋은 웹페이지 즐겨찾기
