el-tree实现tab切换
时间: 2023-11-06 22:07:59 浏览: 57
el-tree是Element UI中的一个树形组件,可以用于展示树形数据。要实现tab切换,可以结合使用el-tabs和el-tree组件。
首先,在页面上引入el-tabs和el-tree组件及其依赖:
```html
<template>
<div>
<el-tabs v-model="activeTab">
<el-tab-pane label="Tab 1" name="tab1">
<el-tree :data="treeData" :props="treeProps"></el-tree>
</el-tab-pane>
<el-tab-pane label="Tab 2" name="tab2">
<el-tree :data="treeData" :props="treeProps"></el-tree>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 'tab1',
treeData: [
// 树形数据
],
treeProps: {
// 树形数据的配置项
}
};
}
};
</script>
```
上述代码中,通过el-tabs和el-tab-pane实现了两个tab页,分别为"Tab 1"和"Tab 2"。每个tab页中都嵌套了一个el-tree组件来展示树形数据。通过v-model指令绑定activeTab属性,实现了切换tab时的联动效果。
需要注意的是,treeData是树形数据的具体内容,可以根据自己的需求进行设置;treeProps是树形数据的配置项,也可以根据具体情况进行设置。