ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-12-23 10:34:04  阅读:349  来源: 互联网

标签:多选 表格 element JSON indexs 数据 tableData 弹窗


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

.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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有