【element-ui】使用el-checkbox完成el-table表格数据的全选操作

需求：表格有一列为勾选框列，表格下面有单独的按钮本页勾选和全部勾选，跨页状态可以保存回显，如下图所示：
                         思绪：使用一个数组[]存储每一页是否全选的状态，再使用{}来存储数据的全部选中状态，此中key为对应的页码，value为每一页的选中数据【核心❗】
  1、el-table表格每一行绑定状态，这里没有使用el-table自带的type为selection的多选框

1. <el-table-column
2.          label="选择"
3.          width="60"
4.          align="center"
5.    >
6.        <template slot-scope="scope">
7.        <el-checkbox v-model="scope.row.isSelect" :label="scope.row"  @change="(val) => handleSelect(val, scope.row)"><br></el-checkbox>
8.        </template>
9. </el-table-column>
11. <div style="float: left; line-height: 28px" class="ml15">
12.         <el-checkbox v-model="currentCheck" @change="chooseCurrent">本页全选</el-checkbox>
13.        <el-checkbox v-model="allCheck" @change="chooseAll" >全部选择</el-checkbox>(已选 <span class="txt_primary">{{sum}}</span> 条)
14. </div>

复制代码

2、初始化准备好各种数据

1. data() {
2.         return {
3.         tableData: [], // 表格
4.         allCheckedList:{}, // 所有选中数据
5.         currentChecked:[], // 每页状态
6.         tablePage:[10, 1, 500],
7.         currentCheck:false,
8.         allCheck:false,
9.         pageSum:0,
10.        sum:0,
11.       };
12.    },
14. methods:{
15.            // 加载表格并初始化各项数据
16.             loadTable() {
17.                 axios({
18.                     method: "post",
19.                     url: "",
20.                     data: {
21.                         ajax: true,
22.                         act: "",
23.                     },
24.                 }).then((response) => {
25.                     let resp = response.data;
26.                     if (resp.success) {
27.                         this.tableData = resp.list;
28.                         this.tablePage =  resp.pagging;
29.                         this.tableData.forEach(item=>{
30.                             this.$set(item, 'isSelect', false)
31.                         });
32.                         this.currentChecked = [];
33.                         if(this.tablePage[2]%this.tablePage[0] !=0 ){
34.                             this.pageSum = parseInt(this.tablePage[2]/this.tablePage[0]) + 1 ;
35.                         } else {
36.                             this.pageSum = parseInt(this.tablePage[2]/this.tablePage[0]);
37.                         }
38.                         for(let i=0; i<this.pageSum;i++){
39.                             this.currentChecked.push('false');
40.                         }
41.                         for(let i=1; i<=this.pageSum; i++){
42.                             this.allCheckedList[i] = [];
43.                         }
44.                     } else {}
45.                 }).catch(error=> {});
46.             },}

复制代码

3、告急的全选、单选、取消勾选等联动逻辑

1.    methods:{            
2.             // 本页全选
3.             chooseCurrent(){
4.                 if(this.currentCheck){
5.                     this.currentChecked[(this.tablePage[1]-1)] = 'true';
6.                     this.tableData.forEach(item=>{
7.                         this.$set(item, 'isSelect', true);
8.                     });
9.                     for(let key in this.allCheckedList){
10.                         if(key == this.tablePage[1]){
11.                             this.allCheckedList[this.tablePage[1]] = deepclone(this.tableData);
12.                         }
13.                     }
14.                 } else {
15.                     this.currentChecked[(this.tablePage[1]-1)] = 'false';
16.                     this.tableData.forEach(item=>{
17.                         this.$set(item, 'isSelect', false);
18.                     });
19.                     for(let key in this.allCheckedList){
20.                         if(key == this.tablePage[1]){
21.                             this.allCheckedList[this.tablePage[1]]= [];
22.                         }
23.                     }
24.                 }
25.             },
26.             // 全部全选
27.             chooseAll(){
28.                 if(this.allCheck){
29.                     this.currentChecked = [];
30.                     for(let key in this.allCheckedList){
31.                         this.allCheckedList[key] = [];
32.                     }
33.                     if(this.tablePage[2]%this.tablePage[0] !=0 ){
34.                         this.pageSum = parseInt(this.tablePage[2]/this.tablePage[0]) + 1 ;
35.                     } else {
36.                         this.pageSum = parseInt(this.tablePage[2]/this.tablePage[0]);
37.                     }
38.                     for(let i=0; i<this.pageSum;i++){
39.                         this.currentChecked.push('true');
40.                     }
41.                     for(let key in this.allCheckedList){
42.                         if(key == this.tablePage[1]){
43.                             this.allCheckedList[this.tablePage[1]] = deepclone(this.tableData);
44.                         }
45.                     }
46.                 } else {
47.                     this.currentChecked = [];
48.                     for(let key in this.allCheckedList){
49.                         this.allCheckedList[key] = [];
50.                     }
51.                     for(let i=0; i<this.pageSum;i++){
52.                         this.currentChecked.push('false');
53.                     }
54.                 }
55.             },
56.             // 单行选择
57.             handleSelect(val,row){
58.                 if(val){
59.                     for (let key in this.allCheckedList){
60.                         if(key == this.tablePage[1]){
61.                             let hasObj = false;
62.                             this.allCheckedList[this.tablePage[1]].forEach(item =>{
63.                                 if (item.durrec_id == row.durrec_id) {
64.                                     hasObj = true;
65.                                 }
66.                             })
67.                             if (!hasObj) {
68.                                 this.allCheckedList[this.tablePage[1]].push(row);
69.                             }
70.                         }
71.                     }
72.                 } else {
73.                     for ( let key in this.allCheckedList){
74.                         if(key == this.tablePage[1]){
75.                             for(let i = 0; i < this.allCheckedList[this.tablePage[1]].length;i++){
76.                                 if(row.durrec_id == this.allCheckedList[this.tablePage[1]][i].durrec_id){
77.                                     this.allCheckedList[this.tablePage[1]].splice(i,1)
78.                                 }
79.                             }
80.                         }
81.                     }
82.                 }
83.                 for(let key in this.allCheckedList){
84.                     if(key == this.tablePage[1]){
85.                         if(this.allCheckedList[this.tablePage[1]].length == this.tableData.length){
86.                             this.currentChecked[(this.tablePage[1]-1)] = 'true';
87.                         } else {
88.                             this.currentChecked[(this.tablePage[1]-1)] = 'false';
89.                         }
90.                     }
91.                 }
92.             },
94.            // 计算已选数据
95.             checkSum(){
96.                 this.sum = 0;
97.                 let currentSum = [];
98.                 for(let i = 0; i<this.currentChecked.length;i++){
99.                     if(this.currentChecked[i] == 'true' && (i + 1) != this.pageSum){
100.                         currentSum.push(this.tablePage[0]);
101.                     } else if(this.currentChecked[i] == 'true' && (i + 1) == this.pageSum){
102.                         currentSum.push(this.tablePage[2] - this.tablePage[0] * (this.pageSum -1));
103.                     } else {
104.                         currentSum.push(this.allCheckedList[i+1].length);
105.                     }
106.                 }
107.                 for(let i = 0; i< currentSum.length;i++){
108.                     this.sum += currentSum[i];
109.                 }
110.             },
111.     },

复制代码

4、由于只能拿到当前分页的数据，无法拿到全部数据，使用watch监听了一下

1.     watch:{
2.             tableData:{
3.                 handler (value) {
4.                     // 表格分页后的数据状态
5.                     if(this.currentChecked[(this.tablePage[1]-1)] == 'true'){
6.                         value.forEach(item=>{
7.                             this.$set(item, 'isSelect', true);
8.                         });
9.                         for(let key in this.allCheckedList){
10.                             if(key == this.tablePage[1]){
11.                                 this.allCheckedList[this.tablePage[1]] = deepclone(value);
12.                             }
13.                         }
14.                         this.currentCheck = true;
15.                     } else {
16.                         for(let key in this.allCheckedList){
17.                             if(key == this.tablePage[1]){
18.                                 if(this.allCheckedList[this.tablePage[1]].length !==0){
19.                                     this.allCheckedList[this.tablePage[1]].forEach(item =>{
20.                                         value.forEach(i=>{
21.                                            if(item.durrec_id == i.durrec_id){
22.                                                this.$set(i, 'isSelect', true);
23.                                            }
24.                                         })
25.                                     })
26.                                 } else {
27.                                     value.forEach(item=>{
28.                                         this.$set(item, 'isSelect', false);
29.                                     })
30.                                 }
31.                             }
32.                         }
33.                         this.currentCheck = false;
34.                     }
35.                     // 判断全选按钮
36.                     let allCheck = true;
37.                     this.currentChecked.forEach(checkFlag=>{
38.                         allCheck = allCheck && checkFlag == 'true'
39.                     })
40.                     this.allCheck = allCheck;
41.                     // 计算已选数量
42.                     this.checkSum();
43.                 },
44.                 deep:true
45.             },
46.             currentChecked:{
47.                 handler(value){
48.                     if(value[(this.tablePage[1])-1] == 'true'){
49.                         this.tableData.forEach(item=>{
50.                             this.$set(item, 'isSelect', true);
51.                         })
52.                     } else {
53.                         this.tableData.forEach(item=>{
54.                             this.$set(item, 'isSelect', false);
55.                         })
56.                     }
57.                    this.checkSum();
58.                 },
59.                 deep:true
60.             },
61.         },

复制代码

5、回传全部的已选数据，使用分页的哀求又拿了一遍数据

1.           // 批量提醒
2.             allWarning(){
3.                 if(this.allCheck){
4.                     axios({
5.                         method: "post",
6.                         url: "",
7.                         data: {
8.                             ajax: true,
9.                             act: "",
10.                             check:'T',
11.                         },
12.                     }).then((response) => {
13.                         let resp = response.data;
14.                         if (resp.success) {
15.                            // ...
16.                         } else {
17.                             this.$message.error(resp.message);
18.                         }
19.                     }).catch(error=> {
20.                     });
21.                 } else {
22.                     let choosedIdT = [];
23.                     let choosedIdF = [];
24.                     for(let i=0; i<this.currentChecked.length; i++){
25.                         if(this.currentChecked[i] == 'true'){
26.                             axios({
27.                                 method: 'post', url: '',
28.                                 data: {
29.                                     ajax: true, act: '', page: i+1,
30.                                 }
31.                             }).then( response => {
32.                                 let resp = response.data;
33.                                 if(resp.success){
34.                                     const pageList = deepclone(resp.list);
35.                                     pageList.forEach(item =>{
36.                                         choosedIdT.push(item.durrec_id);
37.                                     })
38.                                 }else{
39.                                     Valert({msg:resp.message})
40.                                 }
41.                             }).catch(error=> { });
42.                         } else {
43.                             this.allCheckedList[i+1].forEach(i=>{
44.                                 choosedIdF.push(i.durrec_id);
45.                             })
46.                         }
47.                     }
48.                     setTimeout(()=>{
49.                         const ids = choosedIdT.concat(choosedIdF);
50.                         axios({
51.                             method: "post",
52.                             url: "/",
53.                             data: {
54.                                 ajax: true,
55.                                 act: "",
56.                                 check:'F',
57.                                 id:ids.join(","),
58.                             },
59.                             loading:{ target:".table"}
60.                         }).then((response) => {
61.                             let resp = response.data;
62.                             if (resp.success) {
63.                                 // ...
64.                             } else {
65.                                 this.$message.error(resp.message);
66.                             }
67.                         }).catch(error=> { });
68.                     },300)
69.                 }
70.             },

复制代码

记载一些繁琐精良的笨方法