elementUIPLUS的el-tree-select组件,选择后显示全路径名称
时间: 2023-08-16 11:05:28 浏览: 412
对于elementUIPLUS的el-tree-select组件,要显示全路径名称,你可以通过以下方式实现:
1. 设置el-tree-select的props属性中的`node-key`为每个节点的唯一标识符,例如'id'。
2. 在el-tree-select的props属性中添加`render-format`函数,该函数接受两个参数:`label`和`node`,其中`label`为当前节点的名称,`node`为当前节点的数据对象。
3. 在`render-format`函数中,通过`node`对象的`data`属性可以获取当前节点的完整数据,包括其所有父级节点的信息。使用该数据可以构造当前节点的全路径名称。
下面是一个示例代码,供你参考:
```
<el-tree-select
:props="{ nodeKey: 'id', renderFormat: renderFullPath }"
:data="treeData">
</el-tree-select>
...
methods: {
renderFullPath(label, node) {
let path = node.data.label;
let parent = node.parent;
while (parent) {
path = parent.data.label + '/' + path;
parent = parent.parent;
}
return path;
}
}
```
相关问题
elementUIPLUS的el-tree-select组件,懒加载情况下选择后显示全路径名称
对于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函数中,通过遍历节点的父节点来获取节点的完整路径。
el-tree-select组件禁止选择父节点
可以通过 `el-tree-select` 组件的 `check-strictly` 属性来实现禁止选择父节点的功能。设置 `check-strictly` 为 `true` 后,组件会强制节点的选中状态和父子节点的关系保持一致,也就是说只有叶子节点可以被选中。
具体实现方法如下:
1. 在 `el-tree` 组件上设置 `check-strictly` 属性为 `true`。
```html
<el-tree :data="treeData" :props="defaultProps" :check-strictly="true">
</el-tree>
```
2. 在 `el-tree-select` 组件上设置 `show-checkbox` 属性为 `true`。
```html
<el-tree-select :data="treeData" :props="defaultProps" :show-checkbox="true">
</el-tree-select>
```
这样就可以禁止选择父节点,只能选择叶子节点了。