实现效果
- 选中父级时会选中所有子级
- 表头全选选中所有父级与子级
涉及代码
- 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 时触发的事件
- 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,多点几次能够完成全选,我未对此再进行优化,如下有两种情况:
- 存在已选-拥有子节点
- 存在已选-没有子节点
没有使用什么复杂算法,就是判断情况,遍历处理,代码比较紊乱,欢迎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数组),所以能够对原数组进行更改。
希望能帮助到各位。
文章评论