vue使用ant-design-vue中TreeSelect树选择异步加载数据

1.开发环境 vue
2.电脑系统 windows10专业版
3.在使用ant-design-vue开发的过程中,我们在使用树形选择的时候,由于数据量过大,我们一般会点击父节点来请求子节点的数据,下面我来分享一下方法.
4.废话不多说,直接上代码:

<a-tree-select
            v-model="ruleForm.StoreCategoryobj.value2"
            tree-data-simple-mode
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="ruleForm.StoreCategoryobj.options"
            placeholder="Please select"
            :load-data="StoreCategoryload"  //异步加载数据的方法
            @focus="StoreCategoryobjfocus" // 获取焦点的方法
            :showSearch="true"  //显示搜索框
          />

StoreCategoryobj: {
    value2: "",
    options: [
        {
            id: 1,
            pId: 0,
            value: "1",
            title: "Expand to load"
        },
        {
            id: 2,
            pId: 0,
            value: "2",
            title: "Expand to load"
        },
        {
            id: 3,
            pId: 0,
            value: "3",
            title: "Tree Node",
            isLeaf: true
        },
          ],
    id: "",
},

5.在methods中添加如下代码:

//获取焦点的时候,把绑定的值赋值为后端获取的数据
StoreCategoryobjfocus() {
    console.log("获取焦点事件");
    treetable({
        pid: this.account.rootTypeId,
        storeId: this.account.storeId,
    }).then((res) => {
        console.log("我是树形结构的表格接口");
        console.log(res);
        console.log(this.$Cmethods.treelist(res.result));
        this.ruleForm.StoreCategoryobj.options = this.$Cmethods.treelist(
            res.result
        );
        // this.ruleForm.StoreCategoryobj.options = this.$Cmethods.treelist(
        //   res.result
        // );
        // console.log(this.$Cmethods.treelist(res.result));
        // this.ruleForm.StoreCategoryobj.options = this.$Cmethods.treelist(
        //   res.result
        // );
    });

// 点击父节点的时候,请求子节点的数据
StoreCategoryload(treeNode) {
    console.log(treeNode);
    console.log(treeNode.dataRef);
    return treetable({
        pid: treeNode.dataRef.id,
        storeId: this.account.storeId,
    }).then((res) => {
        console.log("我是树形结构的表格接口");
        console.log(res);
        console.log(res.result);
        console.log(this.$Cmethods.treelist(res.result));
        console.log(this.ruleForm.StoreCategoryobj.options);
        treeNode.dataRef.children = this.$Cmethods.treelist(res.result); //把获取的子节点的数据,赋值为父节点中children
    });
},

6.全局树形过滤方法:

function treelist(tree, arr = []) {
    if (!tree.length) return []
    for (let item of tree) {
        // 循环数组，然后过滤数据
        // 如果该条数据type不为0时，跳出本次循环
        // if (item.type !== 0) continue
        // 如果满足条件时，用新node代替，然后把chilren清空
        // console.log(item[name]);
        item.label = item.name;
        item.isLeaf = !item.isParent;
        item.title = item.name;
        item.value = item.id;
        // let node = { ...item, children: [] }
        let node = {
            ...item,
            children: []
        }
        // 然后添加到新数组中
        arr.push(node)
        // 如果有子节点，调用递归函数，并把空数组传给下一个函数
        // 利用引用数据类型的特性，实现浅拷贝
        // 递归函数过滤时会改变这个空数组数据，从而实现层级结构过滤
        if (item.children && item.children.length) {
            filterTree(item.children, node.children)
        }
    }
    return arr
}

7.效果如下:

8.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。