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 内容展示