ElementUI Table表格树形数据多选框实现树形控件式选中效果

实现效果

1. 选中父级时会选中所有子级
2. 表头全选选中所有父级与子级

涉及代码

1. html elementUI表格部分

<el-table
	:data="orgs"
	style="width: 100%;"
	size="medium"
	class="table"
	ref="multipleTable"
	header-cell-class-name="table-header"
	@selection-change="handleSelectionChange"
	:tree-props="{children: children}"
	row-key="id"
	@select="rowSelect"
	@select-all="selectAll">
	<el-table-column type="selection" width="55" align="center"></el-table-column>
	.....
	.....
</el-table>

ref="multipleTable" //注册引用信息，用来之后获取表格所有row（行数据）
@select="rowSelect" //监听elementUI表格事件：当用户手动勾选数据行的 Checkbox 时触发的事件
@select-all="selectAll" //监听当用户手动勾选全选 Checkbox 时触发的事件

2. Script部分

/*注意在获取初始数据时，所有节点（包括子节点）都增加一个isChecked 标志参数*/
rowSelect(selection, row) {
          
   
    if (row.children) {
          
    //只对有子节点的行响应
        if (!row.isChecked) {
          
      //由行数据中的元素isChecked判断当前是否被选中
            row.children.map((item) => {
          
    //遍历所有子节点
                this.$refs.multipleTable.toggleRowSelection(item, true); //切换该子节点选中状态
                /*
                方法名                    说明                                      参数
                                     用于多选表格，切换某一行的选中状态，         row, selected
                toggleRowSelection   如果使用了第二个参数，则是设置这一行
                                     选中与否（selected 为 true 则选中）
                 */
                item.isChecked = true;
            });
            row.isChecked = true; //当前行isChecked标志元素切换为false
        } else {
          
   
            row.children.map((item) => {
          
   
                this.$refs.multipleTable.toggleRowSelection(item, false);
                item.isChecked = false;
            });
            row.isChecked = false;
        }
        // console.log(this.multipleSelection, row);
    }
},
selectAll(selection) {
          
   
    // selection 是选中的数据集合
    this.$refs.multipleTable.data.map((items) => {
          
    //使用$ref获取注册的子组件信息，用data获取所有行，并用map函数遍历行
        if (items.children) {
          
   
            if (!items.isChecked) {
          
    //若遍历出来的行未选中
                this.$refs.multipleTable.toggleRowSelection(items, true); //行变为选中状态
                items.isChecked = true; //更新标志参数
                items.children.map((item) => {
          
    //遍历子节点并改变状态与标志参数
                    this.$refs.multipleTable.toggleRowSelection(item, true);
                    item.isChecked = true;
                });
            } else {
          
    //选中状态同理
                this.$refs.multipleTable.toggleRowSelection(items, false);
                items.isChecked = false;
                items.children.map((item) => {
          
   
                    this.$refs.multipleTable.toggleRowSelection(item, false);
                    item.isChecked = false;
                });
            }
        }
        else{
          
   
            if (!items.isChecked) items.isChecked = true;
            else items.isChecked = false;
        }
    });
    // console.log(this.orgs)
}

感想

目前这样仍然存在一个问题：当使用表头选择框进行全选时，若已选择某些数据，无法直接全选，但不会bug，多点几次能够完成全选，我未对此再进行优化，如下有两种情况：

1. 存在已选-拥有子节点
2. 存在已选-没有子节点 没有使用什么复杂算法，就是判断情况，遍历处理，代码比较紊乱，欢迎dalao优化指正，或者优化判断上述两种未考虑的情况。

涉及一个js小知识

在学习的时候，上述代码中用来遍历的JS函数map()，在教程中提到：

map()为操作数组的一种方法，官方文档显示： map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。 map() 方法按照原始数组元素顺序依次处理元素。 注意： map() 不会对空数组进行检测。 注意： map() 不会改变原始数组。

但上述代码实际使用中发现，使用map()函数是能够改变原数组的值，关于这个问题，在 上看到了实验结果。 以下为原贴实验内容：

1. 当数组为基础类型时原数组不变：

let array=[1,2,3,4,5]
let newArray=array.map((item) => item*2)
console.log(array); // [1,2,3,4,5]
console.log(newArray); //[2, 4, 6, 8, 10]

2. 当数组为引用类型时原数组发生改变：

let array = [{
          
    name: Anna, age: 16 }, {
          
    name: James, age: 18 }]
let newArray=array.map((item) => {
          
   
	item.like=eat;
	return item;
})
console.log(array); // [{ name: Anna, age: 16,like: "eat"},{ name: James, age: 18,like: "eat"}]
console.log(newArray); //[{ name: Anna, age: 16,like: "eat"},{ name: James, age: 18,like: "eat"}]

由此得知，我代码中遍历的都是引用类型数据（Object数组），所以能够对原数组进行更改。

希望能帮助到各位。