多表格嵌套怎么控制每一行，每一行的操作互不影响

最新推荐文章于 2023-03-17 11:06:16 发布

子龙不在常山hhh

最新推荐文章于 2023-03-17 11:06:16 发布

阅读量305

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/hryztt123/article/details/129398006

版权

问题：多层table嵌套，第二层table有批量删除操作，批量删除按钮复选框选择后才会显示，怎么不影响其他层

解决：给每一行添加属性，batchDeleted，刚第二层table复选框被选择后 batchDeleted变为true

问题：设置改变后，失去响应式,数据不更新，用this.$set()，触发页面更新

第一层table

<el-table
   :data="list"
   @expand-change="handleExpand"
   row-key="id"
 >

// 列表接口
this.list.forEach(item=> {
     item.batchBtn = false
 })

展开或者收起，复选框恢复原样

handleExpand(row) {
      this.$set(row, "loading", true);
      this.$set(row, "batchBtn", false);
      this.getProductSlot(row); // 第二层数据
  },

第二层table

 <el-table :data="props.row.slots" 
    @selection-change="(val) =>{
        handleSelectionChange(val,props.row,props.$index)
    }">

handleSelectionChange(val,row,index) {
      this.multipleSelection = val.map((value) => value.id);
      if(this.multipleSelection.length> 0) {
        row.batchBtn = true
      } else {
        row.batchBtn = false
      }
      this.$set(this.list,index,row)
    },

table中selection复选框根据条件禁用某一行

<el-table-column
   type="selection"
   :selectable="checkboxDisabled"
   width="55"
>
</el-table-column>

 checkboxDisabled(row){
      if(row.state === 'free') { // 条件
        return false // 禁用
      }else{
        return true  // 不禁用
      }
    },