1. 效果
2.实现
<el-table ref="multipleTable2" :data='deviceData'
:header-cell-style="{background:'#eef1f6',color:'#606266'}" style="width: 100%" @select="userHandleChange" @select-all='selcectAllChange'>
<el-table-column type="selection" width="55" > </el-table-column>
<el-table-column prop="deviceId" label="编号">
</el-table-column>
<el-table-column prop="deviceAddress" label="位置">
</el-table-column>
</el-table>
<!--分页组件-->
<div style="text-align: center;margin-top: 20px;">
<el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
:current-page="currentPage1" :page-sizes="[3,10, 20, 30, 40, 50, 100]" :page-size="pageSize1"
layout="total, sizes, prev, pager, next, jumper" :total="total1">
</el-pagination>
</div>
</div>
方法
<script>
export default {
data() {
return {
deviceData:[],//列表数据
currentPage1:1,
pageSize1:3,
newArr:'',
downArr : [],
changeId :[],//选中的所有Id
selectAdd:[],//当前页所选中的id
}
},
mouted:{
this.jurisdictionApi()
},
methods:{
//请求列表数据接口
jurisdictionApi() {
this.changeId = [2,3,6]; //初始化要回显选中的数组id
let datas = {
// keyword: this.form.keyword, //模糊查询
page: this.currentPage1,
pageSize: this.pageSize1,
// id: this.treeId, //维度id
//roleId: this.updateUserId, //角色id
//dataPermission: this.form.dataPermission, //0所有权限 1项目维度 2路段维度 3区域维度
}
//获取列表接口
selectDeviceIdByUserId(datas).then(res => {
this.deviceData = res.data.data;
this.total1 = res.data.total;
this.selectAdd = this.changeId.filter(item => this.deviceData.some(ele => ele.id === item)); //拿到当页匹配的设备id
console.log('已有设备id数组', this.changeId, this.selectAdd);
//回显选中数据
this.$nextTick(() => {
this.deviceData.forEach((item, index) => {
this.selectAdd.forEach((item1, index1) => {
if (item.id == item1) {
this.$refs.multipleTable2.toggleRowSelection(this.deviceData[index], true);
}
})
})
});
}).catch(res => {})
},
//当用户手动勾选数据行的 Checkbox 时触发的事件
userHandleChange(val,row){
console.log('进1',val,row);
//如果手动勾选所有设备按钮为选中状态,则初始化按钮,并显示分页
// 拿到当前页选中的id数组
if (val != null && val != "") {
var numbers = "";
for (let obj of val) {
// console.log("选中", obj.id);
if (numbers == "") {
numbers += obj.id;
} else {
numbers += "," + obj.id;
}
}
this.newArr = numbers;
this.downArr = numbers.split(',');
//目前选中的数组id
let changeType = this.downArr.map(Number);
//要添加的过滤新数据数组
const _arr1 = changeType.filter(item1 => !this.selectAdd.includes(item1));
if(_arr1.length>0){//有新元素
// this.changeId后台返的回显id数组
//将新数组添加进原数组id
this.changeId = Array.from(new Set([...this.changeId,..._arr1]));
this.selectAdd = Array.from(new Set([...this.selectAdd,..._arr1]));
// console.log('过滤',_arr1,'添加后的原数组id', this.changeId )
}else{//删除元素操作
//要删除的数据数组
const _arr2 = this.selectAdd.filter(item2 => !changeType.includes(item2));
//将要删除的数组从原数组中删掉
this.changeId.splice(this.changeId.findIndex(item => item == _arr2),1);
this.selectAdd.splice(this.selectAdd.findIndex(item => item == _arr2),1);
}
console.log('当前选中', changeType, '当前页设备id', this.selectAdd,'原数组id',this.changeId );
} else {
this.newArr = '';
this.downArr = [];
}
},
//全选/取消
selcectAllChange(val){
// console.log('全部',val);
let arr = [];
//拿到当前页全选的数组id
val.forEach((item,index)=>{
arr.push(item.id)
})
let arr1 = arr.filter(item1 => !this.selectAdd.includes(item1))
if(arr1.length>0){//有新元素,往原数组和当前分页选中数组添加
//原数组数据
this.changeId = Array.from(new Set([...this.changeId,...arr1]));
//当前分页数组
this.selectAdd = Array.from(new Set([...this.selectAdd,...arr1]));
}else{//删除所有元素操作
let arr2 = this.selectAdd.filter(item2 => !arr.includes(item2));
//删除原数组中当前页全选中的所有id
this.changeId = this.changeId.filter(item=>{
return !arr2.includes(item)
})
//删除当前选中数组中全选中的所有id
this.selectAdd = this.selectAdd.filter(item=>{
return !arr2.includes(item)
})
}
console.log('当前选中', arr, '当前页设备id', this.selectAdd,'原数组id',this.changeId,'新元素', arr1);
},
//分页
handleSizeChange1(val) {
this.pageSize1 = val;
this.jurisdictionApi();
},
handleCurrentChange1(val) {
this.currentPage1 = val;
this.jurisdictionApi();
},
}
}
</script>
转发请注明原创噢~~~~
看完记得点个赞哟!!!