VUE 標簽頁自定義label(iview Tabs)

1. 概述

1.1 說明

　　有時需要對標簽頁上的標簽內容進行自定義，此次自定義標簽頁內容后增加按鈕操作。可通過按鈕進行處理其他設置或信息。

 2. 代碼

2.1 頁面處理

<template>
  <Tabs :value="tabSelect" @on-click="tabClickSetting">
    <TabPane v-for="(tab, index) in tabList" :key="index" :label="setTabPaneLabel(tab.label, tab.value)" :name="tab.value">
      <p>{{tab.content}}</p>
    </TabPane>
  </Tabs>
</template>

2.2 邏輯處理

<script>
export default {
  data () {
    return {
      tabList: [
        {label: '語文', value: '1', content: '科目名稱為語文'},
        {label: '數學', value: '2', content: '科目名稱為數學'},
        {label: '英文', value: '3', content: '科目名稱為英文'}
      ],
      tabSelect: '1'
    }
  },
  methods: {
    /**
     * 設置名稱
     */
    setTabPaneLabel(label, value) {
      return (h) => {
        let btnSet = null
        if (`${this.tabSelect}` === `${value}`) {
          btnSet = h('Button', {
            props: {
              type: 'success',
              size: 'small'
            },
            style: {
              marginLeft: '10px'
            },
            on: {
              click: () => {
                this.handleTabButtonClick()
              }
            }
          }, '科目操作')
        }
        return h('div', [
          h('span', `${label}`),
          btnSet
        ])
      }
    },
    /**
     * tab上button事件
     */
    handleTabButtonClick () {
      console.log('進行對應功能處理')
      this.$Message.success('點擊按鈕')
    },
    /**
     * tab切換事件
     */
    tabClickSetting (val) {
      this.tabSelect = val
    }
  }
}
</script>

 

2.3 內容展示