需求：表格有一列為勾選框列，表格下面有單獨的按鈕本頁勾選和全部勾選，跨頁狀態(tài)可以保存回顯，如下圖所示：
思路：使用一個數(shù)組[]存儲每一頁是否全選的狀態(tài)，再使用{}來存儲數(shù)據(jù)的所有選中狀態(tài)，其中key為對應(yīng)的頁碼，value為每一頁的選中數(shù)據(jù)【核心?】
1、el-table表格每一行綁定狀態(tài)，這里沒有使用el-table自帶的type為selection的多選框
<el-table-column
label="選擇"
width="60"
align="center"
>
<template slot-scope="scope">
<el-checkbox v-model="scope.row.isSelect" :label="scope.row" @change="(val) => handleSelect(val, scope.row)"><br></el-checkbox>
</template>
</el-table-column>
<div style="float: left; line-height: 28px" class="ml15">
<el-checkbox v-model="currentCheck" @change="chooseCurrent">本頁全選</el-checkbox>
<el-checkbox v-model="allCheck" @change="chooseAll" >全部選擇</el-checkbox>(已選 <span class="txt_primary">{{sum}}</span> 條)
</div>2、初始化準備好各種數(shù)據(jù)
data() {
return {
tableData: [], // 表格
allCheckedList:{}, // 所有選中數(shù)據(jù)
currentChecked:[], // 每頁狀態(tài)
tablePage:[10, 1, 500],
currentCheck:false,
allCheck:false,
pageSum:0,
sum:0,
};
},
methods:{
// 加載表格并初始化各項數(shù)據(jù)
loadTable() {
axios({
method: "post",
url: "",
data: {
ajax: true,
act: "",
},
}).then((response) => {
let resp = response.data;
if (resp.success) {
this.tableData = resp.list;
this.tablePage = resp.pagging;
this.tableData.forEach(item=>{
this.$set(item, 'isSelect', false)
});
this.currentChecked = [];
if(this.tablePage[2]%this.tablePage[0] !=0 ){
this.pageSum = parseInt(this.tablePage[2]/this.tablePage[0]) + 1 ;
} else {
this.pageSum = parseInt(this.tablePage[2]/this.tablePage[0]);
}
for(let i=0; i<this.pageSum;i++){
this.currentChecked.push('false');
}
for(let i=1; i<=this.pageSum; i++){
this.allCheckedList[i] = [];
}
} else {}
}).catch(error=> {});
},}3、主要的全選、單選、取消勾選等聯(lián)動邏輯
methods:{
// 本頁全選
chooseCurrent(){
if(this.currentCheck){
this.currentChecked[(this.tablePage[1]-1)] = 'true';
this.tableData.forEach(item=>{
this.$set(item, 'isSelect', true);
});
for(let key in this.allCheckedList){
if(key == this.tablePage[1]){
this.allCheckedList[this.tablePage[1]] = deepclone(this.tableData);
}
}
} else {
this.currentChecked[(this.tablePage[1]-1)] = 'false';
this.tableData.forEach(item=>{
this.$set(item, 'isSelect', false);
});
for(let key in this.allCheckedList){
if(key == this.tablePage[1]){
this.allCheckedList[this.tablePage[1]]= [];
}
}
}
},
// 全部全選
chooseAll(){
if(this.allCheck){
this.currentChecked = [];
for(let key in this.allCheckedList){
this.allCheckedList[key] = [];
}
if(this.tablePage[2]%this.tablePage[0] !=0 ){
this.pageSum = parseInt(this.tablePage[2]/this.tablePage[0]) + 1 ;
} else {
this.pageSum = parseInt(this.tablePage[2]/this.tablePage[0]);
}
for(let i=0; i<this.pageSum;i++){
this.currentChecked.push('true');
}
for(let key in this.allCheckedList){
if(key == this.tablePage[1]){
this.allCheckedList[this.tablePage[1]] = deepclone(this.tableData);
}
}
} else {
this.currentChecked = [];
for(let key in this.allCheckedList){
this.allCheckedList[key] = [];
}
for(let i=0; i<this.pageSum;i++){
this.currentChecked.push('false');
}
}
},
// 單行選擇
handleSelect(val,row){
if(val){
for (let key in this.allCheckedList){
if(key == this.tablePage[1]){
let hasObj = false;
this.allCheckedList[this.tablePage[1]].forEach(item =>{
if (item.durrec_id == row.durrec_id) {
hasObj = true;
}
})
if (!hasObj) {
this.allCheckedList[this.tablePage[1]].push(row);
}
}
}
} else {
for ( let key in this.allCheckedList){
if(key == this.tablePage[1]){
for(let i = 0; i < this.allCheckedList[this.tablePage[1]].length;i++){
if(row.durrec_id == this.allCheckedList[this.tablePage[1]][i].durrec_id){
this.allCheckedList[this.tablePage[1]].splice(i,1)
}
}
}
}
}
for(let key in this.allCheckedList){
if(key == this.tablePage[1]){
if(this.allCheckedList[this.tablePage[1]].length == this.tableData.length){
this.currentChecked[(this.tablePage[1]-1)] = 'true';
} else {
this.currentChecked[(this.tablePage[1]-1)] = 'false';
}
}
}
},
// 計算已選數(shù)據(jù)
checkSum(){
this.sum = 0;
let currentSum = [];
for(let i = 0; i<this.currentChecked.length;i++){
if(this.currentChecked[i] == 'true' && (i + 1) != this.pageSum){
currentSum.push(this.tablePage[0]);
} else if(this.currentChecked[i] == 'true' && (i + 1) == this.pageSum){
currentSum.push(this.tablePage[2] - this.tablePage[0] * (this.pageSum -1));
} else {
currentSum.push(this.allCheckedList[i+1].length);
}
}
for(let i = 0; i< currentSum.length;i++){
this.sum += currentSum[i];
}
},
},4、因為只能拿到當前分頁的數(shù)據(jù)，無法拿到所有數(shù)據(jù)，使用watch監(jiān)聽了一下
watch:{
tableData:{
handler (value) {
// 表格分頁后的數(shù)據(jù)狀態(tài)
if(this.currentChecked[(this.tablePage[1]-1)] == 'true'){
value.forEach(item=>{
this.$set(item, 'isSelect', true);
});
for(let key in this.allCheckedList){
if(key == this.tablePage[1]){
this.allCheckedList[this.tablePage[1]] = deepclone(value);
}
}
this.currentCheck = true;
} else {
for(let key in this.allCheckedList){
if(key == this.tablePage[1]){
if(this.allCheckedList[this.tablePage[1]].length !==0){
this.allCheckedList[this.tablePage[1]].forEach(item =>{
value.forEach(i=>{
if(item.durrec_id == i.durrec_id){
this.$set(i, 'isSelect', true);
}
})
})
} else {
value.forEach(item=>{
this.$set(item, 'isSelect', false);
})
}
}
}
this.currentCheck = false;
}
// 判斷全選按鈕
let allCheck = true;
this.currentChecked.forEach(checkFlag=>{
allCheck = allCheck && checkFlag == 'true'
})
this.allCheck = allCheck;
// 計算已選數(shù)量
this.checkSum();
},
deep:true
},
currentChecked:{
handler(value){
if(value[(this.tablePage[1])-1] == 'true'){
this.tableData.forEach(item=>{
this.$set(item, 'isSelect', true);
})
} else {
this.tableData.forEach(item=>{
this.$set(item, 'isSelect', false);
})
}
this.checkSum();
},
deep:true
},
},5、回傳所有的已選數(shù)據(jù)，利用分頁的請求又拿了一遍數(shù)據(jù)文章來源：http://www.zghlxwxcb.cn/news/detail-504743.html
// 批量提醒
allWarning(){
if(this.allCheck){
axios({
method: "post",
url: "",
data: {
ajax: true,
act: "",
check:'T',
},
}).then((response) => {
let resp = response.data;
if (resp.success) {
// ...
} else {
this.$message.error(resp.message);
}
}).catch(error=> {
});
} else {
let choosedIdT = [];
let choosedIdF = [];
for(let i=0; i<this.currentChecked.length; i++){
if(this.currentChecked[i] == 'true'){
axios({
method: 'post', url: '',
data: {
ajax: true, act: '', page: i+1,
}
}).then( response => {
let resp = response.data;
if(resp.success){
const pageList = deepclone(resp.list);
pageList.forEach(item =>{
choosedIdT.push(item.durrec_id);
})
}else{
Valert({msg:resp.message})
}
}).catch(error=> { });
} else {
this.allCheckedList[i+1].forEach(i=>{
choosedIdF.push(i.durrec_id);
})
}
}
setTimeout(()=>{
const ids = choosedIdT.concat(choosedIdF);
axios({
method: "post",
url: "/",
data: {
ajax: true,
act: "",
check:'F',
id:ids.join(","),
},
loading:{ target:".table"}
}).then((response) => {
let resp = response.data;
if (resp.success) {
// ...
} else {
this.$message.error(resp.message);
}
}).catch(error=> { });
},300)
}
},記錄一些繁瑣精巧的笨方法??文章來源地址http://www.zghlxwxcb.cn/news/detail-504743.html
到了這里，關(guān)于【element-ui】使用el-checkbox完成el-table表格數(shù)據(jù)的全選操作的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
