elementui 三级树形结构如何使用
时间: 2023-10-13 21:13:07 浏览: 43
要使用 ElementUI 的三级树形结构,你需要使用 `el-tree` 组件。具体步骤如下:
1. 在页面中引入 ElementUI 的 CSS 和 JS 文件。
2. 在代码中引入 `el-tree` 组件。
```javascript
import { ElTree } from 'element-ui';
```
3. 在模板中使用 `el-tree`。
```html
<el-tree
:data="treeData"
:props="treeProps"
:load="loadNode"
:render-content="renderContent"
@node-click="handleNodeClick">
</el-tree>
```
其中,`data` 属性用于指定树形数据,`props` 属性用于指定节点属性,`load` 属性用于指定异步加载方法,`render-content` 属性用于指定节点内容的渲染方法,`node-click` 事件用于处理节点点击事件。
4. 在 Vue 实例中定义树形数据、节点属性、异步加载方法、节点内容渲染方法和节点点击处理方法。
```javascript
export default {
data() {
return {
treeData: [
{
label: '一级节点 1',
children: [
{
label: '二级节点 1-1',
children: [
{
label: '三级节点 1-1-1'
},
{
label: '三级节点 1-1-2'
}
]
},
{
label: '二级节点 1-2',
children: [
{
label: '三级节点 1-2-1'
},
{
label: '三级节点 1-2-2'
}
]
}
]
},
{
label: '一级节点 2',
children: [
{
label: '二级节点 2-1',
children: [
{
label: '三级节点 2-1-1'
},
{
label: '三级节点 2-1-2'
}
]
},
{
label: '二级节点 2-2',
children: [
{
label: '三级节点 2-2-1'
},
{
label: '三级节点 2-2-2'
}
]
}
]
}
],
treeProps: {
label: 'label',
children: 'children'
}
};
},
methods: {
loadNode(node, resolve) {
if (node.level === 0) {
return resolve([
{
label: '二级节点 3-1'
},
{
label: '二级节点 3-2'
}
]);
}
if (node.level === 1) {
return resolve([
{
label: '三级节点 3-1-1'
},
{
label: '三级节点 3-1-2'
}
]);
}
return resolve([]);
},
renderContent(h, { node, data, store }) {
return <span>{node.label} - {data.label}</span>;
},
handleNodeClick(node, data, store) {
console.log(node, data, store);
}
}
};
```
以上就是使用 ElementUI 的三级树形结构的步骤和示例代码。