使用el-table的树状结构数据的勾选列，可以勾选第一层级，但是第二级之后的都不支持勾选

一、首先我们处理题目需求：

（1）勾选所有子节点后自动勾选父节点

（2）勾选父节点会自动勾选所有子节点

html代码：

<el-table
          :data="tableDataRight"
          stripe
          height="calc(100% - 50px)"
          @selection-change="handleSelectionChange"
          @row-dblclick="onRowDblclick"
          @sort-change="onSortChanged"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          row-key="id"
          default-expand-all="true"
          ref="table"
          @select="handleSelect"
        >

data代码：

      tableDataRight: [],

method代码：

    handleSelect(selection, row) {
      if (row.children) {
        // 如果是父节点，则同时勾选其子节点
        row.children.forEach((child) => {
          this.$refs.table.toggleRowSelection(child);
        });
      } else if (row.pid) {
        // 如果是子节点且有父节点，则判断是否勾选父节点
        const parent = this.tableDataRight.find((item) => item.id === row.pid);
        if (parent) {
          // 判断是否所有子节点都被勾选
          const allChildrenSelected = parent.children.every((child) =>
            selection.includes(child)
          );
          if (allChildrenSelected) {
            // 如果所有子节点都被勾选，则勾选父节点
            this.$refs.table.toggleRowSelection(parent);
          }
        }
      }
    },

二、问题一：勾选完子节点和父节点后，如果我去取消勾选所有的子节点，父节点还是勾选状态

这个很简单只需要多加个else语句就行

 handleSelect(selection, row) {
      if (row.children) {
        // 如果是父节点，则同时勾选其子节点
        row.children.forEach((child) => {
          this.$refs.table.toggleRowSelection(child);
        });
      } else if (row.pid) {
        // 如果是子节点且有父节点，则判断是否勾选父节点
        const parent = this.tableDataRight.find((item) => item.id === row.pid);
        if (parent) {
          // 判断是否所有子节点都被勾选
          const allChildrenSelected = parent.children.every((child) =>
            selection.includes(child)
          );
          if (allChildrenSelected) {
            // 如果所有子节点都被勾选，则勾选父节点
            this.$refs.table.toggleRowSelection(parent);
          } else {
            // 否则，取消勾选父节点
            this.$refs.table.toggleRowSelection(parent, false);
          }
        }
      }
    },

三、问题二：先勾选一两个子节点，然后点击勾选父节点，这两个勾选的节点被取消勾选，其他没被勾选的子节点被勾选

希望在勾选父节点时，不影响已勾选的子节点，并且只勾选未勾选的子节点

    handleSelect(selection, row) {
      if (row.children) {
        // 这个是父节点取消勾选的情况，将所有子节点全部取消勾选
        let allSelected = row.children.every((child) => selection.includes(child));
        if (allSelected) {
          // 如果所有子节点都被勾选，则全部取消勾选
          row.children.forEach((child) => {
            this.$refs.table.toggleRowSelection(child), false;
          });
        } else {
          row.children.forEach((child) => {
            // 如果没有被勾选就勾选
            if (!selection.includes(child)) {
              this.$refs.table.toggleRowSelection(child);
            }
          });
        }
      } else if (row.pid) {
        // 如果是子节点且有父节点，则判断是否勾选父节点
        const parent = this.tableDataRight.find((item) => item.id === row.pid);
        if (parent) {
          // 判断是否所有子节点都被勾选
          const allChildrenSelected = parent.children.every((child) =>
            selection.includes(child)
          );
          if (allChildrenSelected) {
            // 如果所有子节点都被勾选，则勾选父节点
            this.$refs.table.toggleRowSelection(parent);
          } else {
            // 否则，取消勾选父节点
            this.$refs.table.toggleRowSelection(parent, false);
          }
        }
      }
    },

四、问题三：总勾选框只能勾选一级数据

html代码（在<el-table>添加）：

@select-all="selectAll"

method代码：

    selectAll(selection) {
      // 根据勾选状态判断是否勾选或取消勾选所有子节点
      this.tableDataRight.forEach((row) => {
        if (!row.children || row.children.length === 0) {
          return;
        }
 
        // 取消勾选所有子节点，不管之前是否有取消勾选过的子节点
        row.children.forEach((child) => {
          this.$refs.table.toggleRowSelection(child, false);
        });
 
        if (selection.includes(row)) {
          // 勾选父节点时，勾选所有子节点
          row.children.forEach((child) => {
            this.$refs.table.toggleRowSelection(child);
          });
        }
      });
    },

总结：所有代码

html代码：

        <el-table
          :data="tableDataRight"
          stripe
          height="calc(100% - 50px)"
          @selection-change="handleSelectionChange"
          @row-dblclick="onRowDblclick"
          @sort-change="onSortChanged"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          row-key="id"
          default-expand-all="true"
          ref="table"
          @select="handleSelect"
          @select-all="selectAll"
        >

js代码：

    handleSelect(selection, row) {
      if (row.children) {
        // 这个是父节点取消勾选的情况，将所有子节点全部取消勾选
        let allSelected = row.children.every((child) =>
          selection.includes(child)
        );
        if (allSelected) {
          // 如果所有子节点都被勾选，则全部取消勾选
          row.children.forEach((child) => {
            this.$refs.table.toggleRowSelection(child), false;
          });
        } else {
          row.children.forEach((child) => {
            // 如果没有被勾选就勾选
            if (!selection.includes(child)) {
              this.$refs.table.toggleRowSelection(child);
            }
          });
        }
      } else if (row.pid) {
        // 如果是子节点且有父节点，则判断是否勾选父节点
        const parent = this.tableDataRight.find((item) => item.id === row.pid);
        if (parent) {
          // 判断是否所有子节点都被勾选
          const allChildrenSelected = parent.children.every((child) =>
            selection.includes(child)
          );
          if (allChildrenSelected) {
            // 如果所有子节点都被勾选，则勾选父节点
            this.$refs.table.toggleRowSelection(parent);
          } else {
            // 否则，取消勾选父节点
            this.$refs.table.toggleRowSelection(parent, false);
          }
        }
      }
    },
    selectAll(selection) {
      // 根据勾选状态判断是否勾选或取消勾选所有子节点
      this.tableDataRight.forEach((row) => {
        if (!row.children || row.children.length === 0) {
          return;
        }
 
        // 取消勾选所有子节点，不管之前是否有取消勾选过的子节点
        row.children.forEach((child) => {
          this.$refs.table.toggleRowSelection(child, false);
        });
 
        if (selection.includes(row)) {
          // 勾选父节点时，勾选所有子节点
          row.children.forEach((child) => {
            this.$refs.table.toggleRowSelection(child);
          });
        }
      });
    },