ant a-table 树表格级联选择_a-table children

<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>