用u-table,data为tableData生成一个虚拟树表格
时间: 2023-12-14 09:40:23 浏览: 36
可以使用 `u-table` 的 `tree-props` 属性来实现虚拟树表格的展示。
首先,需要在 `tableData` 数组中添加一个 `children` 属性,用于存放当前行的子节点。例如:
```
const tableData = [
{
name: '节点1',
children: [
{
name: '节点1.1'
},
{
name: '节点1.2'
}
]
},
{
name: '节点2'
}
];
```
然后,在 `u-table` 中设置 `tree-props` 属性,如下所示:
```
<u-table :data="tableData" :tree-props="{ children: 'children' }">
<u-table-column prop="name" label="名称"></u-table-column>
</u-table>
```
其中,`children: 'children'` 表示子节点数据存放在 `children` 属性中。
完整代码如下:
```
<template>
<div>
<u-table :data="tableData" :tree-props="{ children: 'children' }">
<u-table-column prop="name" label="名称"></u-table-column>
</u-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: '节点1',
children: [
{
name: '节点1.1'
},
{
name: '节点1.2'
}
]
},
{
name: '节点2'
}
]
};
}
};
</script>
```
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![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)