vue2.x，el-table，树形表格存在多选的时候，如何优化让父子选框进行联动？

Question

需求1，当点击多选的时候，不止选中父级，父级下的子项也需要选中

父子间的选框，类似全选框一样，可以呈现 indeterminate 状态

同时点击父级选框，可以对子项进行全选/全不选
更改子级选框，也能联动改变父级选框的状态

并且以上联动效果支持在翻页的时候保留

应该如何实现？

Answer 1

https://codesandbox.io/p/sandbox/agitated-merkle-qmhmck?file=...

看看这是不是你想要的，如果是的话，按照下面步骤来：

1. 给你的el-table加上row-key属性，row-key的值为你的数据唯一标示名，一般会是id。
2. 给你的勾选框column加上reserve-selection属性，不用写值。
3. 切换分页验证效果。

<template>
  <div id="app">
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      row-key="id"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" reserve-selection width="55">
      </el-table-column>
      <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="address" label="地址" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="setPage(1)">第一页</el-button>
      <el-button @click="setPage(2)">第二页</el-button>
    </div>
  </div>
</template>

<script>
const fetchData = (page) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const page1Data = [
        {
          id: "1",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "2",
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ];
      const page2Data = [
        {
          id: "3",
          date: "2016-05-03",
          name: "雷军",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: "4",
          date: "2016-05-02",
          name: "雷军",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ];

      if (page === 1) {
        resolve(page1Data);
      }
      if (page === 2) {
        resolve(page2Data);
      }
    }, 1000);
  });
};

export default {
  name: "App",
  data() {
    return {
      page: 1,
      tableData: [],
      multipleSelection: [],
    };
  },

  methods: {
    setPage(page) {
      this.page = page;
    },
    async getTableData(page) {
      const data = await fetchData(page);
      this.tableData = data;
    },
    handleSelectionChange(val) {
      console.log("val", val);
    },
  },
  watch: {
    page: {
      immediate: true,
      handler(val) {
        this.getTableData(val);
      },
    },
  },
};
</script>