el-table 树结构 中 为了实现“子节点都勾选上了父节点也要勾选上，反之子节点全部取消了父节点也要取消”的功能

<template>
  <el-table
    ref="table"
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    :indent="50"
    :select-on-indeterminate="false"
    @select="select"
    @select-all="selectAll"
    default-expand-all
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="date" label="日期" sortable width="180"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: 3,
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          children: [
            {
              id: 31,
              date: "2016-05-31",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              id: 32,
              date: "2016-05-32",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
          ],
        },
        {
          id: 4,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },

  methods: {
    // 递归设置子节点的选中状态
    setChildren(children, type) {
      children.forEach((child) => {
        this.toggleSelection(child, type);
        if (child.children) {
          this.setChildren(child.children, type);
        }
      });
    },

    // 选中或取消选中行
    select(selection, row) {
      if (selection.some((el) => el.id === row.id)) {
        // 选中行
        if (row.children) {
          this.setChildren(row.children, true); // 选中所有子节点
        }
      } else {
        // 取消选中行
        if (row.children) {
          this.setChildren(row.children, false); // 取消所有子节点
        }
      }

      // 更新父节点的选中状态
      this.updateParentSelection(row);
    },

    // 更新父节点的选中状态
    updateParentSelection(row) {
      const parent = this.findParent(this.tableData, row.id);
      if (parent) {
        const allChildrenSelected = parent.children.every((child) =>
          this.$refs.table.selection.some((sel) => sel.id === child.id)
        );
        const someChildrenSelected = parent.children.some((child) =>
          this.$refs.table.selection.some((sel) => sel.id === child.id)
        );

        if (allChildrenSelected) {
          // 如果所有子节点都被选中，则选中父节点
          this.toggleSelection(parent, true);
        } else if (!someChildrenSelected) {
          // 如果所有子节点都被取消，则取消父节点
          this.toggleSelection(parent, false);
        } else {
          // 部分子节点被选中，设置父节点为不确定状态
          this.toggleSelection(parent, false);
        }

        // 递归更新父节点的父节点
        this.updateParentSelection(parent);
      }
    },

    // 查找父节点
    findParent(data, id, parent = null) {
      for (const item of data) {
        if (item.id === id) {
          return parent;
        }
        if (item.children) {
          const found = this.findParent(item.children, id, item);
          if (found) return found;
        }
      }
      return null;
    },

    // 动态设置行的选中状态
    toggleSelection(row, select) {
      if (row) {
        this.$nextTick(() => {
          this.$refs.table && this.$refs.table.toggleRowSelection(row, select);
        });
      }
    },

    // 全选或取消全选
    selectAll(selection) {
      const isSelect = selection.some((el) => {
        const tableDataIds = this.tableData.map((j) => j.id);
        return tableDataIds.includes(el.id);
      });

      if (isSelect) {
        // 全选
        this.tableData.forEach((row) => {
          this.toggleSelection(row, true);
          if (row.children) {
            this.setChildren(row.children, true);
          }
        });
      } else {
        // 取消全选
        this.tableData.forEach((row) => {
          this.toggleSelection(row, false);
          if (row.children) {
            this.setChildren(row.children, false);
          }
        });
      }
    },
  },
};
</script>