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