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