element-ui实现左树右列表
时间: 2023-10-29 18:08:05 浏览: 63
要实现左树右列表的布局,可以使用 Element UI 的 Tree 和 Table 组件结合使用。以下是一个简单的示例:
```html
<template>
<div>
<el-row :gutter="20">
<el-col :span="8">
<el-tree
:data="treeData"
node-key="id"
default-expand-all
@node-click="handleNodeClick"
></el-tree>
</el-col>
<el-col :span="16">
<el-table :data="listData" border>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: '分类1',
children: [
{ id: 11, label: '子分类1' },
{ id: 12, label: '子分类2' },
],
},
{
id: 2,
label: '分类2',
children: [
{ id: 21, label: '子分类3' },
{ id: 22, label: '子分类4' },
],
},
],
listData: [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 25, gender: '女' },
{ name: '王五', age: 30, gender: '男' },
],
};
},
methods: {
handleNodeClick(data) {
// 根据点击的树节点更新右侧列表数据
// 这里可以根据需要进行异步请求获取数据
// 然后更新 listData
},
},
};
</script>
```
在上面的示例中,使用了 `<el-tree>` 组件实现左侧的树状结构,通过 `treeData` 数据来渲染树节点。当点击树节点时,可以通过 `handleNodeClick` 方法来处理点击事件,例如根据点击的节点获取相关数据并更新右侧的列表数据。
在右侧使用了 `<el-table>` 组件来展示列表数据,通过 `listData` 数据来渲染表格内容。