【ant-design-vue】树形表格数据，实现父子关联选择

<template>
    <a-table
      :columns="columns" 
      :data-source="tabData" 
      :customRow="tableClick"
      expandRowByClick
      :row-selection="{selectedRowKeys: selectedRowKeys, onSelectAll: onSelectAll, onSelect: onSelect}" 
    />
</template>

/** 引入ant-design-vue的Table */
import Vue from "vue";
import Table from 'ant-design-vue/lib/table'; // 加载 JS
import 'ant-design-vue/lib/table/style/css'; // 加载 CSS  ant-design-vue
Vue.use(Table);

export default {
    data() {
        return {
            selectedRowKeys:[],
            columns: [
                {
                    title: 'Name',
                    dataIndex: 'name',
                    key: 'name',
                },
                {
                    title: 'Age',
                    dataIndex: 'age',
                    key: 'age',
                    width: '12%',
                },
                {
                    title: 'Address',
                    dataIndex: 'address',
                    width: '30%',
                    key: 'address',
                },
            ],
           
            tabData: [
                {
                    key: 1,
                    name: 'John Brown sr.',
                    age: 60,
                    address: 'New York No. 1 Lake Park',
                    children: [
                        {
                            key: 11,
                            name: 'John Brown',
                            age: 42,
                            address: 'New York No. 2 Lake Park',
                        },
                        {
                            key: 12,
                            name: 'John Brown jr.',
                            age: 30,
                            address: 'New York No. 3 Lake Park',
                            children: [
                                {
                                    key: 121,
                                    name: 'Jimmy Brown',
                                    age: 16,
                                    address: 'New York No. 3 Lake Park',
                                },
                            ],
                        },
                        {
                            key: 13,
                            name: 'Jim Green sr.',
                            age: 72,
                            address: 'London No. 1 Lake Park',
                            children: [
                                {
                                    key: 131,
                                    name: 'Jim Green',
                                    age: 42,
                                    address: 'London No. 2 Lake Park',
                                    children: [
                                        {
                                            key: 1311,
                                            name: 'Jim Green jr.',
                                            age: 25,
                                            address: 'London No. 3 Lake Park',
                                        },
                                        {
                                            key: 1312,
                                            name: 'Jimmy Green sr.',
                                            age: 18,
                                            address: 'London No. 4 Lake Park',
                                        },
                                    ],
                                },
                            ],
                        },
                    ],
                },
                {
                    key: 2,
                    name: 'Joe Black',
                    age: 32,
                    address: 'Sidney No. 1 Lake Park',
                },
            ],
            expandRowByClick:false,
        }
    },
    
    methods: {
        onSelectAll(selected) {
            if (selected) {
                const tabData = this.tabData;
                const arr = [];
                setVal(tabData, arr);
                this.selectedRowKeys = arr;
            } else {
                this.selectedRowKeys = [];
            }
            function setVal(list, arr) {
                list.forEach(v => {
                  arr.push(v.key);
                  if (v.children) {
                    setVal(v.children, arr);
                  }
                });
            }
        },
        
        onSelect(record, selected) {
            const set = new Set(this.selectedRowKeys);
            const tabData = this.tabData;
            const key = record.key;
            if (selected) {
                set.add(key);
                record.children && setChildCheck(record.children);
                setParentCheck(key);
            } else {
                set.delete(key);
                record.children && setChildUncheck(record.children);
                setParentUncheck(key);
            }
            
            this.selectedRowKeys = Array.from(set);
            // 设置父级选择
            function setParentCheck(key) {
                let parent = getParent(key);
                if (parent) {
                  set.add(parent.key);
                  setParentCheck(parent.key);
                }
            }
            // 设置父级取消，如果父级的子集有选择，则不取消
            function setParentUncheck(key) {
                let childHasCheck = false,
                parent = getParent(key);
                if (parent) {
                    let childlist = parent.children;
                    childlist.forEach(function(v) {
                        if (set.has(v.key)) {
                            childHasCheck = true;
                        }
                    });
                    if (!childHasCheck) {
                        set.delete(parent.key);
                        setParentUncheck(parent.key);
                    }
                }
            }
            // 获取当前对象的父级
            function getParent(key) {
                for (let i = 0; i < tabData.length; i++) {
                    if (tabData[i].key === key) {
                        return null;
                    }
                }
                return _getParent(tabData);
                function _getParent(list) {
                    let childlist,
                    isExist = false;
                    for (let i = 0; i < list.length; i++) {
                        if ((childlist = list[i].children)) {
                            childlist.forEach(function(v) {
                                if (v.key === key) {
                                    isExist = true;
                                }
                            });
                            if (isExist) {
                                return list[i];
                            }
                            if (_getParent(childlist)) {
                                return _getParent(childlist);
                            }
                        }
                    }
                }
            }
            // 设置child全选
            function setChildCheck(list) {
                list.forEach(function(v) {
                    set.add(v.key);
                    v.children && setChildCheck(v.children);
                });
            }
            // 设置child取消
            function setChildUncheck(list) {
                list.forEach(function(v) {
                    set.delete(v.key);
                    v.children && setChildUncheck(v.children);
                });
            }
        },
		
		/** 点击a-table中的行后，展开或关闭其子行 */
        tableClick(record, index){
            return {
                style:{
                    cursor:'pointer',
                },
                on: {
                    click: () => {
                        // console.log(record,index);
                        this.expandRowByClick = !this.expandRowByClick;
                    }
                }
          	}
        },
    }
}