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

Dear 丶 2023-02-26 15:22 176阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXdhbmxl_size_16_color_FFFFFF_t_70]

/** 引入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;
                        }
                    }
              	}
            },
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdXdhbmxl_size_16_color_FFFFFF_t_70]: /images/20230209/843be6b9ab154252afba628c9dbd8a5c.png