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

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

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 = https://www.it610.com/article/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 }

【vue使用ant-design-vue中TreeSelect树选择异步加载数据】7.效果如下: