elementui左树右表联动
时间: 2023-11-21 13:56:30 浏览: 32
element-ui提供了el-tree和el-table两个组件,可以通过监听el-tree的节点点击事件,获取节点信息,然后根据节点信息请求对应的表格数据,再将表格数据渲染到el-table中。具体实现方法如下:
1.在template中使用el-tree和el-table组件,并绑定数据和事件:
```html
<template>
<div>
<el-tree :data="treeData" @node-click="handleNodeClick"></el-tree>
<el-table :data="tableData"></el-table>
</div>
</template>
```
2.在script中定义data和methods,并实现handleNodeClick方法:
```javascript
<script>
export default {
data() {
return {
treeData: [], // 树状结构数据
tableData: [], // 表格数据
};
},
methods: {
// 处理节点点击事件
handleNodeClick(data) {
// 根据节点信息请求对应的表格数据
// xxxx 发送请求 xxapi(data.id).then(res => { this.tableData = res.data })
},
},
};
</script>
```
3.在created生命周期中调用getTreeData方法,获取树状结构数据,并调用disabledFn方法禁用所有节点:
```javascript
created() {
this.getTreeData();
},
methods: {
// 禁用所有节点
disabledFn(treeData) {
treeData.forEach((item) => {
this.$set(item, "disabled", true);
if (item.children) {
this.disabledFn(item.children);
}
});
},
// 获取树状结构数据
getTreeData() {
// xxxx 发送请求 xxapi().then(res => { this.treeData = res.data }).then(() => { this.disabledFn(this.treeData) })
},
},
```