记录element-plus树型表格的bug

本文介绍: 如果数据的子节点命名时children,就没有任何问题，如果后端数据结构子节点是其他名字，比如就有bug。

问题描述

如果数据的子节点命名时children,就没有任何问题，如果后端数据结构子节点是其他名字，比如thisChildList就有bug

  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);