antd vue TreeSelect樹選擇的使用

官方文檔：https://www.antdv.com/components/tree-select-cn/

基本使用

<template>
    <a-tree-select
            v-model="value"
            show-search
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="Please select"
            allow-clear
            tree-default-expand-all
    >
        <a-tree-select-node key="0-1" value="parent 1" title="parent 1">
            <a-tree-select-node key="0-1-1" value="parent 1-0" title="parent 1-0">
                <a-tree-select-node key="random" :selectable="false" value="leaf1" title="my leaf" />
                <a-tree-select-node key="random1" value="leaf2" title="your leaf" />
            </a-tree-select-node>
            <a-tree-select-node key="random2" value="parent 1-1" title="parent 1-1">
                <a-tree-select-node key="random3" value="sss">
                    <b slot="title" style="color: #08c">sss</b>
                </a-tree-select-node>
            </a-tree-select-node>
        </a-tree-select-node>
    </a-tree-select>
</template>

<script>
    export default {
        data() {
            return {
                treeExpandedKeys: [],
                value: undefined,
            };
        },
    };
</script>

效果

從已有的后端數據生成樹選擇框

參考：https://www.antdv.com/components/tree-select-cn/#components-tree-select-demo-generate-form-tree-data

假設后端數據已經有了但是不符合樹選擇框的要求，所以我們要進行一次轉化

樹選擇組件

<a-tree-select
    v-model="form.pid"
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :treeData="treeData"
    placeholder="請選擇父節點"
    allow-clear
    tree-default-expand-all
>

</a-tree-select>

data 屬性

//tree select 樹選擇
treeData: [
    {
        title : '一級菜單',
        value : 0,
        key : 0
    }
],

method方法

/**
 * 樹選擇框,構造轉換，轉換后端數據為樹形選擇需要的數據
 * @param data  后端數據
 * @returns {[]}  返回結構
 */
convertToTreedata(data){
    //console.log(data, '數據構造........')
    var returnData = [];
    //遍歷數據
    for(var i = 0; i < data.length; i++){
        var tempObj = {
            title : data[i].title,
            value : data[i].id,
            key : data[i].id
        };

        //判斷是否存在子節點，如果存在則遞歸
        if('child_node' in data[i]){
            tempObj.children = this.convertToTreedata(data[i].child_node);
        }
        //push到數據數組中
        returnData.push(tempObj);
    }
    return returnData;
},


//在獲取到后端數據之后調用
//轉換
var res = this.convertToTreedata(data.data.data);

//脫掉一層再進行push
this.treeData.push(...res);

效果

單選輸入搜索啟用

參考：https://www.antdv.com/components/tree-select-cn/#API

組件設置

<!--
    v-model 雙向綁定的值
    dropdown-style 下拉樣式
    treeData   菜單數據
    
    //重點屬性
    showSearch 是否開啟搜索框(僅單選)
    treeNodeFilterProp  輸入搜索的屬性
-->
<a-tree-select
    v-model="form.pid"
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :treeData="treeData"
    :showSearch="true"
    treeNodeFilterProp='title'
    placeholder="請選擇父節點"
    allow-clear
    tree-default-expand-all
>

</a-tree-select>

可勾選(使用勾選框實現多選功能)

參考：https://www.antdv.com/components/tree-select-cn/#components-tree-select-demo-checkable

實現代碼

組件設置

<!--授權對話框-->
<a-modal
        :visible="authorize_visible"
        title= "角色授權"
        :confirm-loading="authorize_confirmLoading"
        okText='確認'
        cancel-text="取消"
        @cancel="hideAuthorizeModel"
        @ok="submitAuthorize"
>
    <!--授權樹選擇-->
    <a-tree-select
            v-model="authorize_value"
            style="width: 100%"
            :tree-data="treeData"
            tree-checkable
            :show-checked-strategy="SHOW_PARENT"
            search-placeholder="Please select"
    />
</a-modal>

script 導入

//導入
import { TreeSelect } from 'ant-design-vue';
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

data 導出

//勾選框
SHOW_PARENT,
//tree select 樹選擇
treeData: [],
//授權選擇
authorize_value : [],

methods 主要方法

/**
 * 樹選擇框,構造轉換，轉換后端數據為樹形選擇需要的數據
 * @param data  后端數據
 * @returns {[]}  返回結構
 */
convertToTreedata(data){
    //console.log(data, '數據構造........')
    var returnData = [];
    //遍歷數據
    for(var i = 0; i < data.length; i++){
        var tempObj = {
            title : data[i].title,
            value : data[i].id,
            key : data[i].id
        };

        //判斷是否存在子節點，如果存在則遞歸
        if('child_node' in data[i]){
            tempObj.children = this.convertToTreedata(data[i].child_node);
        }
        //push到數據數組中
        returnData.push(tempObj);
    }
    return returnData;
},
//獲取授權菜單
getAuthorizeMenu(){
    this.loading = true;
    this.axios.get(process.env.VUE_APP_API_URL + this.urls.getMenus).then((data) => {
        //修改loading 狀態
        this.loading = false;

        //數據
        this.data = data.data.data;

        //樹選擇,下拉框重新構造
        //轉換樹菜單選擇
        var res = this.convertToTreedata(data.data.data);
        //脫掉一層再進行push
        this.treeData.push(...res);
        // console.log(this.treeData)
    });
},

mounted中調用

//獲取授權菜單
this.getAuthorizeMenu();

效果

多選輸入搜索啟用

參考：

https://www.antdv.com/components/tree-select-cn/#API

組件設置

<!--授權樹選擇-->
<a-tree-select
        v-model="authorize_value"
        style="width: 100%"
        :tree-data="treeData"
        tree-checkable
        //設置搜索事件
        :filterTreeNode="searchFilterTreeNode"
        :show-checked-strategy="SHOW_PARENT"
        search-placeholder="Please select"
/>

method 實現

//多選搜索過濾
searchFilterTreeNode(inputValue, treeNode){
    /*console.log(inputValue);
    console.log(treeNode);
    //組件數據
    console.log(treeNode.componentOptions.propsData.title);
    //原數據
    console.log(treeNode.data.props.title);*/
    return (
        treeNode.componentOptions.propsData.title.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0
    );
},

效果

關於勾選獲取值的問題

使用樹選擇之后，選中父節點子節點會一起選中，但是雙向綁定的值只有你選中的父節點值，

如

那下面兩種情況的勾選值怎么獲取呢？

• 獲取勾選父節點和下面勾選的子節點的值
• 獲取已勾選子節點以及半勾選狀態的父節點的值

先看api

https://www.antdv.com/components/tree-select-cn/#API

看這幾個事件應該是change事件了，打印一下

選中父節點(相當於全選)

半勾選

看到這里，估計就知道怎么獲取了

change事件的第三個參數是組件屬性，屬性里面有個allCheckedNodes屬性，這個是個數組，每個數組項都有node和children（如果有子項才有），通過這兩個屬性就可以獲取我們想要的值。

但是這只能獲取

• 獲取勾選父節點和下面勾選的子節點的值

這種情況的那第二種情況怎么獲取呢？第二種情況需要使用select事件，同樣是第三個屬性有個halfCheckedKeys的數組，這里就保存半勾選的父節點

但是這樣又出現一個問題select事件只會在選中時觸發，那如果選中了再取消，這時候父節點數據就會有問題，那如何更新父節點數據呢？

表示沒找到方法

我真是黑人問號了......

要不就只能用下面的show_ALL，要不就換Tree樹形控件

https://antdv.com/components/tree-cn/

showCheckedStrategy屬性解決勾選的問題

先看下官方解釋

定義選中項回填的方式。TreeSelect.SHOW_ALL: 顯示所有選中節點(包括父節點). TreeSelect.SHOW_PARENT: 只顯示父節點(當父節點下所有子節點都選中時). 默認只顯示子節點.

啥意思，給你看下效果就知道了

設置為SHOW_ALL

showCheckedStrategy="SHOW_ALL"

效果

設置為SHOW_PARENT

showCheckedStrategy="SHOW_PARENT"

設置為SHOW_CHILD

這三種只有SHOW_ALL是將所有的值獲取到，效果沒那么好看