Vue + element-ui合并单元格后，checkbox多选单选取值问题

最新推荐文章于 2024-12-27 17:21:41 发布

qq_41643208

最新推荐文章于 2024-12-27 17:21:41 发布

阅读量904

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js ui 前端

本文链接：https://blog.youkuaiyun.com/qq_41643208/article/details/126095510

这篇博客主要介绍了在Vue中处理el-table表格的全选和单选操作。通过使用`select`和`select-all`事件替代`selection-change`，实现了选中项的增删管理。在`selectCheckOne`方法中，根据选中状态决定是否添加或移除选中项的ID，而在`selectAll`方法中，通过去重处理确保全选时数组的唯一性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题说明

针对于el-table表格合并后checkbox选值问题，这里特别需要注意的是不要用selection-change这个事件，该事件就是当选择项发生变化时会触发该事件，这里我们会用到一个单选事件select和全选事件select-all

//单选select，全选select-all
@select="selectCheckOne" @select-all="selectAll"

//将选中的值存入的当前数组中
select_box:[]

具体代码实现思路：

当进行全选操作时，针对数组进行去重，单选判断一下是否选中还是取消选中，选中往数组push元素，取消splice删除指定元素即可

//单选
  selectCheckOne(val, row) {
  //isSelect true为选中 false 为取消
      let isSelect = val.length && val.indexOf(row) > -1
      //findIndex返回-1则不存在，>0则存在
      let n = this.select_box.findIndex(v => {
        return v == row.companyId
      })
      if (isSelect) {
        if (n < 0) this.select_box.push(row.companyId)
      } else {
        if (n > -1) this.select_box.splice(n, 1)
      }
    },
    //全选
    selectAll(arr) {
    //全选先把所有id拿到并去重
      let _arr = [...new Set(arr.map(res => res.companyId))]
      this.select_box = _arr
    },