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 指令適合條件頻繁切換的場景。