vue树形结构 怎么展示 子级 中的name的值
时间: 2024-03-26 07:40:44 浏览: 20
如果你使用的是 Element UI 中的 ElTree 组件,可以通过设置 label 属性来展示子级中的 name 值。具体做法如下:
1. 在 ElTree 的 data 数组中,每个节点都应该包含一个 label 属性,用于展示节点的文本内容。可以通过节点的 slot-scope 属性来获取节点数据,然后将 name 值赋给 label 属性:
```
<template>
<el-tree :data="treeData" :props="defaultProps">
<template slot-scope="{ node, data }">
<span class="el-tree-node__label">{{ data.name }}</span>
</template>
</el-tree>
</template>
```
2. 在组件的 props 中设置 defaultProps 属性,用于指定节点数据中的 label 和 children 属性的名称:
```
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
name: '节点1',
children: [
{
id: 11,
name: '节点1-1',
},
{
id: 12,
name: '节点1-2',
},
],
},
{
id: 2,
name: '节点2',
children: [
{
id: 21,
name: '节点2-1',
},
{
id: 22,
name: '节点2-2',
},
],
},
],
};
},
props: {
defaultProps: {
label: 'name',
children: 'children',
},
},
};
</script>
```
这样,就可以展示子级中的 name 值了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)