关于vue.js:vue使用antdesignvue中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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。