实现效果
选中父级时会选中所有子级表头全选选中所有父级与子级
涉及代码
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, 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数组),所以能够对原数组进行更改。
希望能帮助到各位。