1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue 带全选和多选的表格怎么写_vue+element-ui里面table组件多选框实现批量操作

vue 带全选和多选的表格怎么写_vue+element-ui里面table组件多选框实现批量操作

时间:2021-10-13 14:35:03

相关推荐

vue 带全选和多选的表格怎么写_vue+element-ui里面table组件多选框实现批量操作

vue+element-ui里面table组件多选框实现批量操作

有时候人不是被困难难倒的,是被自己蠢哭的。。。官方文档用到某个地方的时候,才感觉对这个方面的理解才会加深一点,还是要记录一下这个地方!

具体要实现的细节

点击表头的复选项,会进行全选;再次点击,会取消;

每次需要把选中该行的id传过去

切换分页的时候,需要有记忆功能:也就是翻页原本选中的不应该消失 。下方图片展示:(展示的是所有的选中的,切换分页的)

第一步添加对应的复选框

具体参照element官网示例

第二步传id过去的话

这个是页面布局

// 点击多选

handleSelectionChange(val) {

this.multipleSelection = val;

this.batchPassArr = [] //每次点击需清空原本数组的内容

this.multipleSelection.map(item => { //遍历数组,把id存进自定义的数组里

this.batchPassArr.push(item.id)

})

this.batchPassArr = this.batchPassArr.join(',')

},

第三步对于切换分页

在表头那里加个:row-key="(row)=>{ return row.id}"

也就是下面这个样子

在自己加的里面加个

:reserve-selection="true"

也就是下面这个

平安夜快乐​!!​!​

有问题的地方,可以多多指导

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。