vue antd 表格树形表格 点击第二级勾选框 第三级全勾选上

<template>
  <div>
    <div class="table-box">
      <a-button type="primary" @click="btnclick">点击获取数据</a-button>
      <a-table
        :columns="columns"
        :data-source="data"
        :row-selection="rowSelection"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "年龄",
          dataIndex: "age",
          key: "age",
          width: "12%",
        },
        {
          title: "地址",
          dataIndex: "address",
          width: "30%",
          key: "address",
        },
      ],

      data: [
        {
          key: 1,
          name: "张三",
          age: 60,
          address: "北京朝阳",
          children: [
            {
              key: 11,
              name: "王五",
              age: 42,
              address: "北京石景山",
            },
            {
              key: 12,
              name: "李四",
              age: 30,
              address: "河北邯郸",
              children: [
                {
                  key: 121,
                  name: "李飒",
                  age: 16,
                  address: "河北石家庄",
                },
              ],
            },
            {
              key: 13,
              name: "马六",
              age: 72,
              address: "山东济南",
              children: [
                {
                  key: 131,
                  name: "马林",
                  age: 42,
                  address: "山东济宁",
                  children: [
                    {
                      key: 1311,
                      name: "马里兰",
                      age: 25,
                      address: "山东滨州",
                    },
                    {
                      key: 1312,
                      name: "马安山",
                      age: 18,
                      address: "山东青岛",
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          key: 2,
          name: "冯七",
          age: 32,
          address: "东北大庆",
        },
        {
          key: 3,
          name: "冯七3",
          age: 32,
          address: "东北大庆",
        },
        {
          key: 4,
          name: "冯七4",
          age: 32,
          address: "东北大庆",
        },
        {
          key: 5,
          name: "冯七5",
          age: 32,
          address: "东北大庆",
        },
        {
          key: 6,
          name: "冯七6",
          age: 32,
          address: "东北大庆",
        },
        {
          key: 7,
          name: "冯七7",
          age: 32,
          address: "东北大庆",
        },
        {
          key: 8,
          name: "冯七8",
          age: 32,
          address: "东北大庆",
        },
        {
          key: 9,
          name: "冯七9",
          age: 32,
          address: "东北大庆",
        },
        {
          key: 10,
          name: "冯七10",
          age: 32,
          address: "东北大庆",
        },
        {
          key: 101,
          name: "冯七101",
          age: 32,
          address: "东北大庆",
        },
        {
          key: 102,
          name: "冯七102",
          age: 32,
          address: "东北大庆",
        },
      ],

      selectedRowKeys: [2],
    };
  },
  created() {},
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this;
      return {
        selectedRowKeys,
        onChange: this.onSelectChange,
        hideDefaultSelections: true,
        onSelect: this.onSelect,
        onSelectAll: this.onSelectAll,
      };
    },
  },

  methods: {
    // 按钮点击事件
    btnclick() {
      this.selectedRowKeys = [...new Set(this.selectedRowKeys)];
      console.log("最后拿到的数据：", this.selectedRowKeys);
    },
    // 选中项发生变化时的回调
    onSelectChange(selectedRowKeys) {
      // this.selectedRowKeys=[]
      this.selectedRowKeys = selectedRowKeys;
    },
    // 用户手动选择/取消选择某列的回调
    onSelect(record, selected) {
      // this.selectedRowKeys=[]
      //每个复选框点击都会触发
      const selectrows = [record.key];

      if (record.hasOwnProperty("children")) {
        const generator = (record) => {
          record.forEach((item) => {
            selectrows.push(item.key);
            if (item.children && item.children.length > 0) {
              generator(item.children);
            }
          });
        };
        generator(record.children);
      }
      const newselect = this.selectedRowKeys.filter(
        (item) => !selectrows.includes(item)
      );
      selected
        ? (this.selectedRowKeys = [...this.selectedRowKeys, ...selectrows])
        : (this.selectedRowKeys = newselect);
      // console.log('剩余的数据：', [...new Set(this.selectedRowKeys)])
    },
    // 勾选全部
    onSelectAll(selected, selectedRows, changeRows) {
      this.selectedRowKeys = [];
      selectedRows.forEach((item) => {
        this.selectedRowKeys.push(item.key);
      });
      // console.log('全部：', [...new Set(this.selectedRowKeys)])
      // console.log('全部：', selected, selectedRows, changeRows)
    },
    // 默认勾选
    getCheckboxProps: (record) => ({
      //重点部分
      props: {
        defaultChecked:
          this.selectedRowKeys.indexOf(record.key) > -1 ? true : false, //defaultCheckedId里面是默认选中的id，判断是否含有这些id，有的那就选中，没有的就不选中
        key: record.key + "", //使得id的数据类型为string
      },
    }),
  },
};
</script>

<style lang="less" scoped>
.table-box {
  background-color: #fff;
}
</style>