element-uitabs标签页的具体使⽤element-ui tabs标签页的具体使⽤
标签页的格式
<el-tabs>
<el-tab-pane>
</el-tab-pane>
</el-tabs>
tabs组件的属性
tabs的属性
tabs的事件
tab-pane的属性
常⽤属性和事件的说明
tabs 属性
v-model="name"    绑定值，对应选项卡的name
type                标签页的风格类型
tab-position    选项卡所在位置  top/right/bottom/left  默认为top
tabs 事件
tab-click    tab 被选中时触发(可以获得被选中标签的实例参数)
tab-pane 属性
label    选项卡标题
name    与选项卡绑定值对应的标识符，表⽰选项卡别名
具体实例
<template>
<div class="app-container">
<div class="the-container">
<el-radio-group v-model="tabPosition" >
<el-radio-button label="top">top</el-radio-button>
<el-radio-button label="right">right</el-radio-button>
<el-radio-button label="bottom">bottom</el-radio-button>
<el-radio-button label="left">left</el-radio-button>
</el-radio-group>
<el-tabs v-model="usable" :tab-position="tabPosition" @tab-click="handleClick">
<el-tab-pane v-for="(tab,index) in tabs" :key="index" :name="tab.name" :label="tab.label">
<div v-show="usable==='1'">
<h1>⽤户管理</h1>
</div>
<div v-show="usable==='2'">
<h1>配置管理</h1>
</div>
<div v-show="usable==='3'">
<h1>⾓⾊管理</h1>
</div>
<div v-show="usable==='4'">
<h1>部门管理</h1>
</div>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tabPosition: 'top',
usable: '1',
tabs: [
{ name: '1', label: '⽤户管理' },
{ name: '2', label: '配置管理' },
{ name: '3', label: '⾓⾊管理' },
{ name: '4', label: '部门管理' }
]
}
},
methods: {
handleClick(tab) {
console.log(tab)
}
}
}
</script>
<style lang="scss" scoped>
.app-container{
height: 100%;
background-color: #f1f1f1;
}
.the-container{
position标签属性
padding: 20px;
height: 100%;
background-color: #fff;
}
</style>
v-show指令⽤法
通过改变元素的 css 属性（display）来决定元素是显⽰还是隐藏。
相对于v-if来说，v-if 指令开销较⼤，所以更适合条件不经常改变的场景⽽ v-show 指令适合条件频繁切换的场景。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。