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" style="margin-bottom: 30px;">
        <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{
    padding: 20px;
    height: 100%;
    background-color: #fff;
  }
</style>

v-show指令用法

通过改变元素的 css 属性（display）来决定元素是显示还是隐藏。

相对于v-if来说，v-if 指令开销较大，所以更适合条件不经常改变的场景而 v-show 指令适合条件频繁切换的场景。