iView Tabs组件使用Render自定义标签

遇到了奇怪的需求，意思是不喜欢iView自带的图标，要求在Tabs标签上展示自定义图标，看了一下官方的文档，发现依然是传统的习惯一一写一半藏一半，我就不给你写全了，慢慢研究去吧。

完整代码如下：

<template>
  <div>
    <Tabs :value="tabsName">
      <TabPane :name="item.tabsName" :label="tabsTabel(item)" v-for="(item,index) in tabsData" :key="index">
        {{item.tabsCon}}
      </TabPane>
    </Tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // tabs数据
      tabsData: [],
      tabsName: '',
      // tabs自定义Label
      tabsTabel(data){
        return (h)=>{
          return h('div', [
              // 加载图标 - 由于用的是iconfont图标, 所以无法显示
              h('i', {
                class: ['iconfont', data.tabsIcon]
              }),
              // 加载标题
              h('span', data.tabsName),
              // 加载数字
              h('Badge', {
                props: {
                  count: data.tabsNum
                }
              })
          ]);
        };
      }
    };
  },
  mounted: function() {
    // 获取标签数据
    this.initTabsData()
  },
  methods: {
    initTabsData: function () {
      // 假装从接口返回来的数据
      this.tabsData = [{
        'tabsName': '标签1',
        'tabsCon': '标签1的内容',
        'tabsNum': 3,
        'tabsIcon': 'ios-american-football'
      }, {
        'tabsName': '标签2',
        'tabsCon': '标签2的内容',
        'tabsNum': 10,
        'tabsIcon': 'md-analytics'
      }, {
        'tabsName': '标签3',
        'tabsCon': '标签3的内容',
        'tabsNum': 20,
        'tabsIcon': 'ios-american-football'
      }]
      // 设置默认展示的TAB
      this.tabsName = this.tabsData[0].tabsName
    }
  }
};
</script>

该有的注释应该都有了，甚至可以新建一个页面直接看DEMO，这是基于官方文档的完整栗子，包含模拟了从接口读出来的数据处理及动态循环等。