多选表格去掉全选显示序号（样式）：

.tableCss {
  .el-table-column--selection.is-leaf .el-checkbox {
    display: none;
  }
  .el-table-column--selection.is-leaf ::before {
    content: '选择';
  }
}

需求:

外层表格数据 可以改动，内层不变，但是做删除时需要联动:

tableData1：弹窗中多选表格的数据

tableData：页面中表格的数据

我的处理逻辑是，深拷贝多选表格的数据，渲染到页面中，将index绑进数据中，做标识，这样，外层数据在删除时，就可以确定到弹窗表格取消选中的是哪一组数据了：

我是动态获取的表格数据，此处有坑：打开弹窗时需要请求数据，但是如果已经勾选，第二次打开弹窗，再次请求，返回数据就会覆盖原本数据，选中状态就会被全部取消掉，这样就违背了联动的初衷，所以此处需要判断：

addNew() {
      if (this.page != this.current) {  // 判断当前页码和上次返回页码是否一致 一致的话，就不再请求
        this.$api.order.packageSelectList(this.page).then(res => {
          let list = res.records
          // 翻页处理
          if (this.page == 1) {
            this.tableData1 = list
          } else {
            this.tableData1.push(...list)
          }
          this.tableData1.forEach((item, indexs) => {
            item.indexs = indexs  // 将索引绑在元素上，方便后续做联动
          })
          this.listTotal = res.total
          this.current = res.current
        })
      }
      this.dialogVisible2 = true
    },

选中数据事件：

// 选择时深拷贝数据
 // 在data中定义数组dataList
    handleSelectionChange(val) {
      this.dataList=val   // 这里可以深拷贝，也可以浅拷贝，在弹窗确认时，深拷贝和在这里深拷贝二选一
    },

弹窗点击确认：

   sureProduct() {
      let arr = JSON.parse(JSON.stringify(this.dataList)) // 深拷贝数据，这样修改的时候就不会改到原本表格的数据了
      let list = this.getList(arr, true) // 处理数据格式
      let list1 = this.editData(list) // 处理数据格式  这里是外层表格显示数据与内层不一样，所以进行处理
      this.tableData = list1
      this.dialogVisible2 = false  // 关闭弹窗
    },

删除外层表格数据，内层表格对应数据取消选中：

apply(id, index, type, indexs) {

		this.$refs.multipleTable.toggleRowSelection(this.tableData1[this.indexs]); // 取消表格中对应数据的选中
        this.tableData.splice(this.index, 1)  // 删除外层表格中对应数据
 }

这样就做好了，删除的联动，外层数据的修改，也不会改到多选表格的数据。但是这样有一个bug：

重新选择数据后，新数据会覆盖原本被改动了的数据

所以弹窗确认时不能直接覆盖：

 sureProduct() {
      // let arr = JSON.parse(JSON.stringify(this.dataList))
      let arr1 = JSON.parse(JSON.stringify(this.dataList)),
        arr2 = JSON.parse(JSON.stringify(this.tableData)),
        Alength = this.tableData.length;
      if (Alength > 0) {
        this.tableData.forEach(val => {
          arr1 = arr1.filter(ele => ele.indexs != val.indexs)  // 增加的数据
        })
        this.dataList.forEach(val => {
          arr2 = arr2.filter(ele => ele.indexs != val.indexs) // 改变和减少的数据
        })
      } else {
        arr1 = JSON.parse(JSON.stringify(this.dataList))
      }

      if (arr1.length > 0) {
        let list = this.getList(arr1, true)
        let list1 = this.editData(list)
        this.tableData.push(...list1)
      }
      if (arr2.length > 0) {
        arr2.forEach(element => {
          this.tableData = this.tableData.filter(ele => ele.indexs != element.indexs) // 筛选掉减少的数据
        });
      }
      this.dialogVisible2 = false
    },

标签：多选,表格,element,JSON,indexs,数据,tableData,弹窗
来源： https://blog.csdn.net/weixin_54106595/article/details/122100423