<p>el-tree 是一个基于 Vue.js 的树形控件,它可以帮助您快速构建树形结构的界面。</p>
<p>要让 el-tree 节点横向展示,您可以使用 el-tree 的 "node-key" 属性来指定每个节点的唯一标识符。然后,您可以使用 "default-expand-all" 属性来展开所有节点,并使用 "highlight-current" 属性来高亮当前选中的节点。</p>
<p>例如,下面是一个使用 el-tree 展示横向树形结构的示例代码:</p>
<p>```
<template>
<el-tree
:data="data"
:props="defaultProps"
node-key="id"
default-expand-all
highlight-current</p>
<blockquote>
</blockquote>
</el-tree>
</template>
<script>
export default {
data() {
return {
data: [
{
id: 1,
label: '一级 1',
children: [
{
id: 4,
label: '二级 1-1',
children: [
{ id: 9, label: '三级 1-1-1' },
{ id: 10, label: '三级 1-1-2' }
]
},
{
id: 5,
label: '二级 1-2',
children: [
{ id: 11, label: '三级 1-2-1' },
{ id: 12, label: '三级 1-2-2' }
]
}
]
},
{
id: 2,
label: '一级 2',
children: [
{
id: 6,
label: '二级 2-1',
children: [
{ id: 13, label: '三级 2-1-1' },
{ id: 14, label: '三级 2-1-2' }
]
},
{
id: 7,
label: '二级 2-2',
children: [
{ id: 15, label: '三级 2-2-1' },
{ id: 16, label: '三级 2-2-2' }
]
}
]
},
{
el-tree 节点横向展示
最新推荐文章于 2024-05-21 23:21:19 发布