elementUIPLUS的el-tree-select组件,懒加载情况下选择后显示全路径名称
时间: 2023-08-16 22:06:09 浏览: 50
对于elementUIPLUS的el-tree-select组件在懒加载情况下选择后显示全路径名称,可以通过在节点被选择后使用树的API获取节点的完整路径来实现。具体实现方法如下:
1. 在el-tree-select组件中设置lazy属性为true,表示开启懒加载模式。
2. 在el-tree-select组件中设置load属性为一个函数,用于获取懒加载节点的子节点。在该函数中,通过返回一个Promise对象来实现异步获取子节点的功能。
3. 在el-tree-select组件中的插槽中添加一个template标签,并设置slot-scope属性为"props",表示接收节点的属性。
4. 在template标签中使用el-tooltip组件来显示节点的全路径名称。其中,设置content属性为节点的完整路径,通过调用树的API获取节点的完整路径。
示例代码如下:
```
<el-tree-select v-model="value" :lazy="true" :load="loadData">
<template slot-scope="{ node }">
<el-tooltip :content="getFullPath(node)" placement="top-start">
{{ node.label }}
</el-tooltip>
</template>
</el-tree-select>
...
methods: {
loadData(node, resolve) {
// 异步获取子节点
// resolve(data);
},
getFullPath(node) {
let path = node.label;
let parent = node.parent;
while (parent) {
path = parent.label + '/' + path;
parent = parent.parent;
}
return path;
}
}
```
注意,在使用load属性懒加载节点时,需要在load函数中返回一个Promise对象,该对象的resolve函数应该传入一个数组,表示获取到的子节点数据。在getFullPath函数中,通过遍历节点的父节点来获取节点的完整路径。