vue结合elementui实现tab
Vue 结合 ElementUI 实现 Tab 标签页
安装 ElementUI
确保项目已安装 Vue 和 ElementUI。若未安装，可通过以下命令安装：
npm install element-ui在 main.js 中引入 ElementUI：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);基本 Tab 结构
使用 <el-tabs> 和 <el-tab-pane> 组件实现标签页：
<template>
<el-tabs v-model="activeTab">
<el-tab-pane label="标签1" name="tab1">内容1</el-tab-pane>
<el-tab-pane label="标签2" name="tab2">内容2</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeTab: 'tab1' // 默认激活的标签页
};
}
};
</script>动态生成 Tab
通过 v-for 动态渲染标签页：
<template>
<el-tabs v-model="activeTab">
<el-tab-pane
v-for="tab in tabs"
:key="tab.name"
:label="tab.label"
:name="tab.name"
>
{{ tab.content }}
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeTab: 'tab1',
tabs: [
{ label: '标签1', name: 'tab1', content: '动态内容1' },
{ label: '标签2', name: 'tab2', content: '动态内容2' }
]
};
}
};
</script>自定义 Tab 样式
通过 type 属性设置标签页样式（如 card 或 border-card）：
<el-tabs v-model="activeTab" type="card">
<el-tab-pane label="卡片样式" name="tab1">内容1</el-tab-pane>
</el-tabs>添加 Tab 操作按钮
在 <el-tabs> 中使用 slot 插入额外按钮：
<el-tabs v-model="activeTab">
<el-tab-pane label="标签1" name="tab1">内容1</el-tab-pane>
<el-button slot="right" @click="addTab">新增标签</el-button>
</el-tabs>
<script>
export default {
methods: {
addTab() {
this.tabs.push({
label: '新标签',
name: 'newTab',
content: '新增内容'
});
}
}
};
</script>监听 Tab 切换事件
通过 @tab-click 监听标签页切换：
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
<el-tab-pane label="标签1" name="tab1">内容1</el-tab-pane>
</el-tabs>
<script>
export default {
methods: {
handleTabClick(tab) {
console.log('切换到标签:', tab.name);
}
}
};
</script>禁用 Tab
通过 disabled 属性禁用特定标签页：
<el-tab-pane label="禁用标签" name="tab2" disabled>不可用内容</el-tab-pane>
