elementUI的table表分页多选
程序员文章站
2022-07-14 08:43:17
...
getList(){
api.getData({pageNo:this.pageNo,recordsPerPage:this.recordsPerPage}).then(res=>{
this.list=res.data.reply.result
this.total=res.data.reply.paginator.total
}).then(()=>{
this.mutipleSelection.forEach(item=>{
this.list.forEach(listItem=>{
if(item.name==listItem.name){
this.$refs.mutipleTable.toggleRowSelection(listItem,true)
}
})
})
})
},
selectChange(arr,row){//在table表上添加@select="selectChange"方法
if(this.mutipleSelection.length>0){
this.mutipleSelection.forEach((item,index)=>{
if(item.name==row.name){
if(arr.indexOf(row)==-1){//判断是勾选还是取消勾选,如果是-1则是取消勾选,否则就是勾选
this.mutipleSelection.splice(index,-1)
}else{
this.mutipleSelection.push(row)
}
}else{
this.mutipleSelection.push(row)
this.mutipleSelection=unique(this.mutipleSelection)//数组去重,当
this.mutipleSelection的长度大于1时,一个值会加入多次,所以先去重
}
})
}else{
this.mutipleSelection.push(row)
}
}
unique是数组去重的方法,另外操作成功之后,利用this.$refs.multipleTable.clearSelection()清空选项
上一篇: java时间大小比较
下一篇: elementUI的Table分页多选框
推荐阅读
-
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
-
vue elementUI table 自定义表头和行合并的实例代码
-
MySQL优化表时提示 Table is already up to date的解决方法
-
vue elementUI table 自定义表头和行合并的实例代码
-
删除Table表中的重复行的方法
-
MySQL优化表时提示 Table is already up to date的解决方法
-
elementUI table表格动态合并的示例代码
-
删除Table表中的重复行的方法
-
elementUI table表格动态合并的示例代码
-
elementUI多选框反选的实现代码