基本使用
配置项
replaceFields
数据渲染属性依赖3个字段:
title、key、children
没有其他可携带的用户数据
对接实际后台返回的数据,很多时候不是直接的title、key可以让我们直接渲染,这个时候_replaceFields_ 就派上了用场。
举栗::replaceFields="{ title: 'buildingName', key: 'buildingId' }"
这里的buildingName作为title渲染,buildingId作为key
需要注意的是:设置为key的字段,一定要确保它的唯一性哦!!!
treeData
树节点渲染的数据
两种方法设置:
1、手动构造
const treeData = [
{
title: '0-0',
key: '0-0',
children: [
{
title: '0-0-0',
key: '0-0-0',
children: [
{ title: '0-0-0-0', key: '0-0-0-0' },
{ title: '0-0-0-1', key: '0-0-0-1' },
{ title: '0-0-0-2', key: '0-0-0-2' },
],
},
{
title: '0-0-1',
key: '0-0-1',
children: [
{ title: '0-0-1-0', key: '0-0-1-0' },
{ title: '0-0-1-1', key: '0-0-1-1' },
{ title: '0-0-1-2', key: '0-0-1-2' },
],
},
],
},
];
2、返回的接口数据构造
在这里呢,同样有两种情况,子树的数据
①同一个接口获取
这里建议使用控件里面的异步加载loadData,详细介绍请移步配置项介绍处。
实现方式是:进入页面即调用getTree的方法,拿到主树的数据,其后每展开一层就会调用它的onLoadData方法,构造子树数据作为children放在主树对应的节点下。
举栗::load-data="onLoadData"
// 获取部门树
getTree() {
classTree()
.then((res) => {
if (res.data.code == '200') {
let data = res.data.result.treeobject;
if (!this.defaultSelectedkeys.length) {
this.defaultSelectedkeys.push(data.buildingId);
}
let obj = {
title: data.buildingName,
key: data.buildingId,
};
this.treeData.push(obj);
} else {
this.loading = false;
}
})
.catch(() => {
this.loading = false;
});
},
//异步加载树形数据
onLoadData(treeNode) {
return new Promise((resolve) => {
if (treeNode.dataRef.children) {
resolve();
return;
}
co