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.效果如下:
文章图片
8.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。
推荐阅读
- 由浅入深理解AOP
- vue-cli|vue-cli 3.x vue.config.js 配置
- 【译】20个更有效地使用谷歌搜索的技巧
- 2020-04-07vue中Axios的封装和API接口的管理
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件