element树形表格 选中子节点父节点也选中

Element UI 是一个基于 Vue 2.0 的桌面端组件库，它提供了一系列可用于构建用户界面的组件。在 Element UI 中，树形表格（Tree Table）组件结合了树形控件和表格控件的功能，允许用户在一个表格内以树形结构展示数据。

在处理树形表格时，如果希望选中子节点时同时选中其父节点，这通常需要通过事件监听和状态管理来实现。可以通过以下步骤进行：

1. 为树形表格的每一行绑定点击事件。
2. 在点击事件的处理函数中，判断当前行是否为子节点。
3. 如果当前行是子节点，并且该子节点被选中，则需要将父节点的状态更新为选中。
4. 如果当前行是父节点，并且该父节点被选中，则需要将所有子节点的状态更新为选中。

在 Element UI 中，可以通过`node-select`事件来监听节点的选择状态变化。在这个事件中，你可以控制父节点和子节点的选择状态，确保当子节点被选中时，其父节点也被选中。

具体实现代码示例如下（假设使用Vue）：

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      type="expand">
      <template slot-scope="props">
        <el-tree
          :data="props.row.children"
          show-checkbox
          node-key="id"
          @check-change="handleCheckChange"
          :default-checked-children="props.row.checkedChildren">
        </el-tree>
      </template>
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    };
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      this.$set(this.tableData, data.rowIndex, Object.assign({}, data.row, {
        checkedChildren: checked ? data.checkedNodes : []
      }));
    }
  }
};
</script>

这段代码展示了如何在 Element UI 的树形表格中监听子节点的状态变化，并相应地更新父节点的选中状态。注意，这里的实现是简化的，具体还需要根据你的实际数据结构和业务逻辑进行调整。