element ui 表格分页多选
需求描述实现思路相关代码
需求描述
表格有分页需要多选，某page选中的数据，当再次到这个page的时候， 之前选中的数据需要是选中状态。比如在首页选中一些数据之后， 跳到第2页， 然后再回首页，首页之前选中的数据要是选中状态。
实现思路
1. Table 用到的事件: @select : 当用户手动勾选数据行的 Checkbox 时触发的事件. 参数(selection, row), selection是一个数组, 所有选中的数据, row是点击该行的数据 @select-all : 当用户手动勾选全选 Checkbox 时触发的事件. 参数(selection), selection是一个数组, 选中的所有数据
2. Table 用到的Methods : toggleRowSelection : 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） 参数(row, selected)
3. 描述
一个数组变量 multipleSelection放选中的数据 multipleSelection = [ ]点击table 每列数据中的 checkbox 触发select事件时 (定义的方法selectARow) : 首先判断状态是取消还是选中, 参数(selection, row), 如果selection数组中包含row, 且 selection长度不为空. 则当前点击是选中状态, 反之则是取消; 选中： 将数据添加到multipleSelection中; 取消： 将数据从multipleSelection中删除;点击table中全选的checkbox 触发select-all事件 (定义的方法handleSelectAll): 首先判断状态是全选还是取消全选, 参数(selection) 如果selection的长度和表格数据(tableData)的长度一致, 则是全选; 反之是取消全选 全选: 将selection的数据合并到multipleSelection 中; 取消全选: 将表格数据tableData 每一条从multipleSelection中删除;当获取表格数据tableData 的时候, 判断每列数据是否是选中状态, 通过
this.$refs.contactTable.toggleRowSelection(item, true) 选中;
判断tableData 的每条数据是否在multipleSelection 中, 如在 获取tableData的那条数据item, 通过
this.$refs.contactTable.toggleRowSelection(item, true) 选中
相关代码
//html
@select-all="handleSelectAll" @select="selectARow">
@current-change="_contactList" :current-page.sync="contactParams.pageNum" :page-size="6" layout="total, prev, pager, next" :total="contactTotal">
//js 三个关键方法
selectARow(val,row){ //单选Checkbox的事件
let selectBool = val.length && val.indexOf(row) !== -1 //当前点击是否勾选
if(!selectBool){ //取消勾选
this.multipleSelection.forEach((item,i) => {
if(item.id == row.id){
this.multipleSelection.splice(i,1)
}
})
}else{ //选中
this.multipleSelection.push(row)
}
},
handleSelectAll(val){ //全选 Checkbox的事件
if(val.length == this.contactData.length){ //全选
this.multipleSelection = this.multipleSelection.concat(val)
//去重
let obj = {}
let result = []
this.multipleSelection.forEach(item => {
if(!obj[item.id]){
result.push(item)
obj[item.id] = true
}
})
this.multipleSelection = result
}else{ //取消全选
this.contactData.forEach(item => {
this.multipleSelection.forEach((multItem,i) => {
if(item.id == multItem.id){
this.multipleSelection.splice(i,1)
}
})
})
}
},
// 获取table数据的时候,给每行的checkbox赋值
_contactList(val) {
this.contactLoading = true;
if(val){
this.contactParams.pageNum = val
}
contactList(this.contactParams).then((res) => {
this.contactData = res.data.rows
this.contactTotal = res.data.total
this.contactLoading = false
this.$nextTick(()=>{
this.contactData.forEach(item => {
this.multipleSelection.forEach(multItem =>{
if(multItem.id == item.id){
this.$refs.contactTable.toggleRowSelection(item, true); //选中这个数据
}
})
})
})
});
},
参考文章
您阅读本篇文章共花了：
发表评论