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

实现效果

表头全选选中所有父级与子级

涉及代码

<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 时触发的事件

Script部分

/*注意在获取初始数据时，所有节点（包括子节点）都增加一个isChecked 标志参数*/rowSelect(selection, row) {if (row.children) {//只对有子节点的行响应if (!row.isChecked) {//由行数据中的元素isChecked判断当前是否被选中row.children.map((item) => {//遍历所有子节点this.$refs.multipleTable.toggleRowSelection(item, true); //切换该子节点选中状态/*方法名说明 参数用于多选表格，切换某一行的选中状态， row, selectedtoggleRowSelection 如果使用了第二个参数，则是设置这一行选中与否（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(s)}

感想

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

存在已选-拥有子节点存在已选-没有子节点

没有使用什么复杂算法，就是判断情况，遍历处理，代码比较紊乱，欢迎dalao优化指正，或者优化判断上述两种未考虑的情况。

涉及一个js小知识

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

map()为操作数组的一种方法，官方文档显示：

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

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

以下为原贴实验内容：

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

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]

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

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数组），所以能够对原数组进行更改。

希望能帮助到各位。