antd vue Tree樹形控件的使用

文檔：https://antdv.com/components/tree-cn/#API

何時使用

文件夾、組織架構、生物分類、國家地區等等，世間萬物的大多數結構都是樹形結構。使用樹控件可以完整展現其中的層級關系，並具有展開收起選擇等交互功能。

基本使用

<template>
    <a-tree
            v-model="checkedKeys"
            checkable
            :expanded-keys="expandedKeys"
            :auto-expand-parent="autoExpandParent"
            :selected-keys="selectedKeys"
            :tree-data="treeData"
            @expand="onExpand"
            @select="onSelect"
    />
</template>
<script>
    const treeData = [
        {
            title: '0-0',
            key: '0-0',
            children: [
                {
                    title: '0-0-0',
                    key: '0-0-0',
                    children: [
                        { title: '0-0-0-0', key: '0-0-0-0' },
                        { title: '0-0-0-1', key: '0-0-0-1' },
                        { title: '0-0-0-2', key: '0-0-0-2' },
                    ],
                },
                {
                    title: '0-0-1',
                    key: '0-0-1',
                    children: [
                        { title: '0-0-1-0', key: '0-0-1-0' },
                        { title: '0-0-1-1', key: '0-0-1-1' },
                        { title: '0-0-1-2', key: '0-0-1-2' },
                    ],
                },
                {
                    title: '0-0-2',
                    key: '0-0-2',
                },
            ],
        },
        {
            title: '0-1',
            key: '0-1',
            children: [
                { title: '0-1-0-0', key: '0-1-0-0' },
                { title: '0-1-0-1', key: '0-1-0-1' },
                { title: '0-1-0-2', key: '0-1-0-2' },
            ],
        },
        {
            title: '0-2',
            key: '0-2',
        },
    ];

    export default {
        data() {
            return {
                expandedKeys: ['0-0-0', '0-0-1'],
                autoExpandParent: true,
                checkedKeys: ['0-0-0'],
                selectedKeys: [],
                treeData,
            };
        },
        watch: {
            checkedKeys(val) {
                console.log('onCheck', val);
            },
        },
        methods: {
            onExpand(expandedKeys) {
                console.log('onExpand', expandedKeys);
                // if not set autoExpandParent to false, if children expanded, parent can not collapse.
                // or, you can remove all expanded children keys.
                this.expandedKeys = expandedKeys;
                this.autoExpandParent = false;
            },
            onCheck(checkedKeys) {
                console.log('onCheck', checkedKeys);
                this.checkedKeys = checkedKeys;
            },
            onSelect(selectedKeys, info) {
                console.log('onSelect', info);
                this.selectedKeys = selectedKeys;
            },
        },
    };
</script>

效果

獲取已勾選子節點以及半勾選狀態的父節點

參考：https://www.jianshu.com/p/a293d1589c24

組件設置

<a-tree
        v-model="checkedKeys"
        checkable
        :expanded-keys="expandedKeys"
        :auto-expand-parent="autoExpandParent"
        :selected-keys="selectedKeys"
        :tree-data="treeData"
        @expand="onExpand"
        //重點
        @check="onBusinessSelectChange"
/>

method

onBusinessSelectChange(selectedKeys, info) {
     console.log('selectedKeys changed: ', selectedKeys);
     console.log('info changed: ', info);

    // 已勾選子節點以及半勾選狀態的父節點
    this.allSelectedNodes = selectedKeys.concat(info.halfCheckedKeys);
    this.businessSelectedRowKeys = selectedKeys;

    console.log('所有節點包含半勾選父節點', this.allSelectedNodes);
    console.log('所有節點不包含半勾選父節點', this.businessSelectedRowKeys);
},

效果

關於樹組件回顯

我們給后台傳過去了父節點，如果有反顯的情況下(如：修改，查看功能)，一旦有父節點，子節點又將會全部勾選！！這種情況下又該怎么辦呢？

思路如下：
1.循環遍歷出組件數據最深層子節點，存放在一個數組中
2.將后台返回的含有父節點的數組和第一步驟遍歷的數組做比較
3.如果有相同值，將相同值取出來，push到一個新數組中
4.利用這個新的重組的數組給Tree組件selected賦值

例：

data 中初始化值
//tree select 樹選擇最深子節點
test:[],

// 1.循環遍歷出最深層子節點，存放在一個數組中
getTreeChildren(data){
    data&&data.map(item=>{
        if(item.children && item.children.length > 0){
            this.getTreeChildren(item.children);
        }else{
            this.test.push(item.key);
        };
        return null;
    });
    return this.test;
},
// 2.將后台返回的含有父節點的數組和第一步驟遍歷的數組做比較
// 3.如果有相同值，將相同值取出來，push到一個新數組中
compareItem(all_data,child_data){
    let uniqueChild = [];
    for(var i in child_data){
        for(var k in all_data){
            if(all_data[k] === child_data[i]){
                uniqueChild.push(all_data[k]);
            }
        }
    }
    return uniqueChild;
},

//授權編輯
authorizeEdit(text, record, index) {
    //顯示對話框
    this.authorize_visible = true;
    //重置授權樹選擇
    this.authorize_value = []

    this.nowEditRoleId = record.id

    this.axios.get(process.env.VUE_APP_API_URL + this.urls.getNodesByRoleId,{params: {
            id : record.id,
        }}).then((data) => {
            console.log(data.data.data, 'node。。。。。。。');

            //遍歷后台數據
            var all_data = [];
            for(var i = 0; i < data.data.data.length; i++){
                all_data.push(data.data.data[i].id);
            }
            //1.獲取組件最深子節點,tree的data
            var child_data = this.getTreeChildren(this.treeData);
            console.log(child_data,'child_data........');
            //2,3 獲取相同的子節點
            console.log(all_data,'all_data........');
            var uniqueChild = this.compareItem(all_data,child_data);
            console.log(uniqueChild,'uniqueChild........');
            //4.利用這個新的重組的數組給Tree組件selected賦值
            this.authorize_value = uniqueChild;

    });
},