element多选表格 在弹窗中选择 渲染到页面中:

多选表格去掉全选显示序号(样式):

.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
    },

上一篇:Service Temporarily Unavailable


下一篇:E:Could not get lock /var/lib/apt/lists/lock - open (11: Resource temporarily unavailable)