记录element-plus树型表格的bug

本文主要是介绍记录element-plus树型表格的bug，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题描述

当禁止1、2级选中时，即使子节点名字是children，全选框对一级也失效
如果后端数据结构子节点是其他名字，比如thisChildList就有bug，

点击全选后，只有一级可以选到，二、三级选不到，也就是全选框只能和一级联动
二级的多选框选不到三级的；反过来，三级的数据全选，父级不受影响
如果用children，
全选框可以选中一级、二三级，也可以取消；但反过来二、三级影响不到全选框，三级影响不到父级

如果数据结构是children

父对于子	选中	取消
全选框对于一级	ok	ok
全选框对于二级	ok	ok
全选框对于三级	ok	ok
一级对于二级	ok	ok
一级对于三级	ok	ok
二级对于三级	ok	ok

子对于父	选中	取消
一级对于全选框	ok	ok
二级对于全选框	No	No
三级对于全选框	No	NO
二级对于一级	No	NO
三级对于一级	NO	NO
三级对于二级	No	No

  const tableData = [{id: 1,date: '2016-05-02',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',selectedAble: true,thisChildList: [{id: 131,date: '2016-05-01',name: 'wangxiaohu',address: 'No. 189, Grove St, Los Angeles',selectedAble: true,thisChildList: [...]},]

解决

参考大佬的代码
传送门


// 递归const setChildren = (children, type) => {// 编辑多个子层级children.map((j) => {toggleSelection(j, type)if (j.thisChildList) {setChildren(j.thisChildList, type)}})}// 选中父节点时，子节点一起选中取消const select = (selection, row) => {console.log('select!!')const hasSelect = selection.some((el) => {return row.id === el.id})console.log('hasSelect', hasSelect)if (hasSelect) {if (row.thisChildList) {// 解决子组件没有被勾选到setChildren(row.thisChildList, true)}} else {// 解决点击父组件取消选中，子级也跟着取消if (row.thisChildList) {setChildren(row.thisChildList, false)}}}const toggleSelection = (row, select) => {if (row) {// 通过使用 nextTick 来延迟执行后续的代码，以确保在更新表格的选中状态之前先进行其他可能的 DOM 更新nextTick(() => {// 这里 && 的作用是 如果左侧表达式的值为真值，则返回右侧表达式的值；// 否则，返回左侧表达式的值。如果左侧表达式的值为假值，则整个表达式的结果也为假值。// toggleRowSelection用于多选表格，切换某一行的选中状态， 如果使用了第二个参数，则可直接设置这一行选中与否multipleTable.value && multipleTable.value.toggleRowSelection(row, select)// 也可以写成 multipleTable.value?.toggleRowSelection(row, select)})}}// 选择全部 默认全选框只能影响第一级的 二、三等级别不会联动//   当用户手动勾选全选 Checkbox 时触发的事件const selectAll = (selection) => {console.log('selectAll——————selection', selection)// tabledata第一层只要有在selection里面就是全选const isSelect = selection.some((el) => {const tableDataIds = tableData.map((j) => j.id)return tableDataIds.includes(el.id)})// tableDate第一层只要有不在selection里面就是全不选const isCancel = !tableData.every((el) => {const selectIds = selection.map((j) => j.id)return selectIds.includes(el.id)})if (isSelect) {selection.map((el) => {if (el.thisChildList) {// 解决子组件没有被勾选到setChildren(el.thisChildList, true)}})}if (isCancel) {tableData.map((el) => {if (el.thisChildList) {// 解决子组件没有被勾选到setChildren(el.thisChildList, false)}})}}//   const selectionChange = (val) => {//     console.log(val)//   }

但仍然有问题，比如3级节点选中，他的父级节点无动于衷，不会联动

解决2

或者把thisChildList 改成children

function renameChildListToChildren(data) {if (!Array.isArray(data)) {return data;}return data.map(item => {const newItem = { ...item };if (newItem.thisChildList) {newItem.children = renameChildListToChildren(newItem.thisChildList);delete newItem.thisChildList;}return newItem;});
}const newData = renameChildListToChildren(tableData);
console.log(newData);