034_Tabs标签页

1. Tabs标签页

1.1. Tabs标签页分隔内容上有关联但属于不同类别的数据集合。

1.2. Tabs Attributes

参数	说明	类型	可选值	默认值
value / v-model	绑定值, 选中选项卡的name	string	无	第一个选项卡的name
type	风格类型	string	card/border-card	无
closable	标签是否可关闭	boolean	无	false
addable	标签是否可增加	boolean	无	false
editable	标签是否同时可增加和关闭	boolean	无	false
tab-position	选项卡所在位置	string	top/right/bottom/left	top
stretch	标签的宽度是否自撑开	boolean	无	false
before-leave	切换标签之前的钩子, 若返回false或者返回Promise且被reject, 则阻止切换。	Function(activeName, oldActiveName)	无	无

1.3. Tabs Events

事件名称	说明	回调参数
tab-click	tab被选中时触发	被选中的标签tab实例
tab-remove	点击tab移除按钮后触发	被删除的标签的name
tab-add	点击tabs的新增按钮后触发	无
edit	点击tabs的新增按钮或tab被关闭后触发	(targetName, action)

1.4. Tab-pane Attributes

参数	说明	类型	可选值	默认值
label	选项卡标题	string	无	无
disabled	是否禁用	boolean	无	false
name	与选项卡绑定值value对应的标识符, 表示选项卡别名	string	无	该选项卡在选项卡列表中的顺序值, 如第一个选项卡则为'1'
closable	标签是否可关闭	boolean	无	false
lazy	标签是否延迟渲染	boolean	无	false

2. Tabs标签页例子

2.1. 使用脚手架新建一个名为element-ui-tabs的前端项目, 同时安装Element插件。

2.2. 编辑index.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Tabs from '../components/Tabs.vue'
import TypeTabs from '../components/TypeTabs.vue'
import PositionTabs from '../components/PositionTabs.vue'
import SlotTabs from '../components/SlotTabs.vue'
import EditableTabs from '../components/EditableTabs.vue'
import AddRemoveTabs from '../components/AddRemoveTabs.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Tabs' },
  { path: '/Tabs', component: Tabs },
  { path: '/TypeTabs', component: TypeTabs },
  { path: '/PositionTabs', component: PositionTabs },
  { path: '/SlotTabs', component: SlotTabs },
  { path: '/EditableTabs', component: EditableTabs },
  { path: '/AddRemoveTabs', component: AddRemoveTabs }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建Tabs.vue

<template>
  <div>
    <h1>基础用法-基础的、简洁的标签页</h1>
    <h4>Tabs组件提供了选项卡功能, 默认选中第一个标签页, 你也可以通过value属性来指定当前选中的标签页。</h4>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'second'
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

2.4. 在components下创建TypeTabs.vue

<template>
  <div>
    <h1>选项卡样式-选项卡样式的标签页</h1>
    <h4>只需要设置type属性为card就可以使选项卡改变为标签风格。</h4>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
    <h1>卡片化-带边框样式的标签页</h1>
    <h4>只需要设置type属性为"border-card就可以使选项卡改变为带边框样式的标签页风格。</h4>
    <el-tabs type="border-card">
      <el-tab-pane label="用户管理">用户管理</el-tab-pane>
      <el-tab-pane label="配置管理">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

2.5. 在components下创建PositionTabs.vue

<template>
  <div>
    <h1>位置</h1>
    <h4>可以通过tab-position设置标签的位置。标签一共有四个方向的设置tabPosition="left|right|top|bottom"。</h4>
    <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 :tab-position="tabPosition" style="height: 200px;">
      <el-tab-pane label="用户管理">用户管理</el-tab-pane>
      <el-tab-pane label="配置管理">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tabPosition: 'left'
    }
  }
}
</script>

2.6. 在components下创建SlotTabs.vue

<template>
  <div>
    <h1>自定义标签页</h1>
    <h4>可以通过具名slot来实现自定义标签页的内容。</h4>
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i> 我的行程</span>
        我的行程
      </el-tab-pane>
      <el-tab-pane label="消息中心">消息中心</el-tab-pane>
      <el-tab-pane label="角色管理">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>

2.7. 在components下创建EditableTabs.vue

<template>
  <div>
    <h1>动态增减标签页</h1>
    <h4>edit点击tabs的新增按钮或tab被关闭后触发。</h4>
    <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
      <el-tab-pane :key="item.name" v-for="item in editableTabs" :label="item.title" :name="item.name">{{item.content}}</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      editableTabsValue: '2',
      editableTabs: [{
        title: 'Tab 1',
        name: '1',
        content: 'Tab 1 content'
      }, {
        title: 'Tab 2',
        name: '2',
        content: 'Tab 2 content'
      }],
      tabIndex: 2
    }
  },
  methods: {
    handleTabsEdit (targetName, action) {
      if (action === 'add') {
        const newTabName = ++this.tabIndex + ''
        this.editableTabs.push({
          title: 'New Tab',
          name: newTabName,
          content: 'New Tab content'
        })
        this.editableTabsValue = newTabName
      }
      if (action === 'remove') {
        const tabs = this.editableTabs
        let activeName = this.editableTabsValue
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              const nextTab = tabs[index + 1] || tabs[index - 1]
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
        }
        this.editableTabsValue = activeName
        this.editableTabs = tabs.filter(tab => tab.name !== targetName)
      }
    }
  }
}
</script>

2.8. 在components下创建AddRemoveTabs.vue

<template>
  <div>
    <h1>自定义增加标签页触发器</h1>
    <h4>tab-add点击tabs的新增按钮后触发。tab-remove点击tab移除按钮后触发。</h4>
    <el-tabs v-model="editableTabsValue" type="card" addable closable @tab-add="addTab" @tab-remove="removeTab">
      <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">{{item.content}}</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      editableTabsValue: '2',
      editableTabs: [{
        title: 'Tab 1',
        name: '1',
        content: 'Tab 1 content'
      }, {
        title: 'Tab 2',
        name: '2',
        content: 'Tab 2 content'
      }],
      tabIndex: 2
    }
  },
  methods: {
    addTab (targetName) {
      const newTabName = ++this.tabIndex + ''
      this.editableTabs.push({
        title: 'New Tab',
        name: newTabName,
        content: 'New Tab content'
      })
      this.editableTabsValue = newTabName
    },
    removeTab (targetName) {
      const tabs = this.editableTabs
      let activeName = this.editableTabsValue
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            }
          }
        })
      }
      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter(tab => tab.name !== targetName)
    }
  }
}
</script>

2.9. 运行项目, 访问http://localhost:8080/#/Tabs

2.10. 运行项目, 访问http://localhost:8080/#/TypeTabs 

2.11. 运行项目, 访问http://localhost:8080/#/PositionTabs

2.12. 运行项目, 访问http://localhost:8080/#/SlotTabs 

 

2.13. 运行项目, 访问http://localhost:8080/#/EditableTabs

 

2.14. 运行项目, 访问http://localhost:8080/#/AddRemoveTabs