Element的table结合树形结构tree多选的问题

Posted 2022-02-05 AC_meimei

Element的table结合树形结构tree多选的问题

一、效果图：

(1)全选：

(2)单选(选择父级子节也选中)：

(3)table有disable的项不能选中(这里列表项条件是status == "1"就禁止掉)：

二、数据结构：

注意：父级和子节都必须有唯一的id

比如：

三、代码：

注意：cliExpenseSplitList是父级数组里children数组名称，名称可以看后端返回前端什么名称来写！`

:data="tableList"
row-key="id"
:tree-props="children: 'cliExpenseSplitList'"
ref="multipleTable"
@select-all="selectAll"
@select="selectChange"
@selection-change="handleSelectionChange"

data() 
    return 
    		tableList: [], // table列表
    		checkedKeys: false, // 列表是否全选中
    
 

  methods: 
	// 1.全选
    selectAll(value) 
      this.checkedKeys = !this.checkedKeys;
      // 过滤条件status!="1"给新的数组
      let list = value.filter((item) => 
        return item.status != "1";
      );
      this.select(list, this.checkedKeys);
    ,
    
    // 1.全选，子节点也选择
    select(data, flag) 
      data.forEach((row) => 
        this.$refs.multipleTable.getTableRef().toggleRowSelection(row, flag);
        if (row.cliExpenseSplitList != undefined) 
          this.select(row.cliExpenseSplitList, this.checkedKeys);
        
      );
    ,
  ,
  
   // 2.编辑多个子节
    setChildren(children, type) 
      children.map((j) => 
        this.toggleSelection(j, type);
        if (j.cliExpenseSplitList) 
          this.setChildren(j.cliExpenseSplitList, type);
        
      );
    ,
    
    // 2. 子节点和列表绑定
    toggleSelection(row, select) 
      if (row) 
        this.$nextTick(() => 
          this.$refs.multipleTable.getTableRef() && this.$refs.multipleTable.getTableRef().toggleRowSelection(row, select)
        )
      
    ,
    
    // 2.单选时也选中子节点
    selectChange(selection, row) 
      if (
        selection.some((el) => 
          return row.id === el.id;
        )
      ) 
        if (row.cliExpenseSplitList) 
          // 解决子组件没有被勾选到
          this.setChildren(row.cliExpenseSplitList, true);
        
       else 
        if (row.cliExpenseSplitList) 
          this.setChildren(row.cliExpenseSplitList, false);
        
      
      console.log(selection, "selection");
    ,
    
     // 1、2选中的数据
    handleSelectionChange(val) 
     	 console.log(val,'对选中的数据进行处理!')
    

注意：我这里的this.$refs.multipleTable.getTableRef().toggleRowSelection()写法是table的ref有封装的写法，如果没有封装可以直接写成this.$refs.multipleTable.toggleRowSelection(),在复制的时候请注意您们自己取的ref和方法的名称 。