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

Element UI 的多选表格,可以使用 `selection-change` 事件来监听选择变化。每次选择变化时,该事件会触发并传递当前已选择的行数据与所有已选择行数据的数组。可以在事件回调函数根据已选择行数据的长度来控制弹窗关闭按钮的可用状态。 示例代码如下: ```html <template> <div> <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false"> <el-table :data="tableData" :selectable="multiple" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="name" label="Name"> </el-table-column> <el-table-column prop="age" label="Age"> </el-table-column> </el-table> <div slot="footer" class="dialog-footer"> <el-button :disabled="!isCloseButtonEnabled" @click="dialogVisible = false"> 关闭 </el-button> </div> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, tableData: [ { id: 1, name: 'John', age: 20 }, { id: 2, name: 'Mary', age: 25 }, { id: 3, name: 'Bob', age: 30 } ], multiple: true, // 开启多选模式 selectedRows: [] // 已选择的行数据 }; }, computed: { isCloseButtonEnabled() { return this.selectedRows.length > 0; } }, methods: { handleSelectionChange(rows) { this.selectedRows = rows; } } }; </script> ``` 在上面的代码,`isCloseButtonEnabled` 计算属性根据已选择行数据的长度来判断弹窗关闭按钮是否可用。当已选择行数据的长度大于 0 时,弹窗关闭按钮变为可用状态,否则为禁用状态。同时,`handleSelectionChange` 方法更新已选择行数据的状态。在模板,根据 `isCloseButtonEnabled` 计算属性来动态绑定关闭按钮的 `disabled` 属性,从而实现弹窗关闭按钮的可用状态与已选择行数据的状态同步更新的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值