【Vue】tab组件的label属性render如何获取参数

Z时代
2024-01-10
分类：技术分享

 <Tabs v-model="tabCurrntName" type="card">
<Tab-pane name="tab0" label="首页">
<iframe id="ifrIndexPage" :src="https://segmentfault.com/q/1010000011189544/indexpageUrl" frameborder="0"></iframe>
</Tab-pane>
<template v-for="(item, index) in tabPanels">
<Tab-pane closable :label="item.title" :name="item.key" :key="item.key" class="g-fit">
<iframe :id="item.ifrName" :src="https://segmentfault.com/q/1010000011189544/item.url" frameborder="0"></iframe>
</Tab-pane>
</template>
</Tabs>
-------------------------------------------------------------
methods: {
myRender(h){
return h('div', [
h('span', '标签一'), // 我想动态设置这个名称
h('Badge', {
props: {
count: 3
}
})
])
}}

官网文档说label属性可以用render重写，但是我这例子，怎么把item传进去render里？

PS：有个bug不知道算不算，我这里，第一个tabpanel是首页固定的，
【Vue】tab组件的label属性render如何获取参数
但是如果其他的tabpanel都指定label=render方法后，在新增加tabpanel的时候，首页这个标签会突然凹进去。

iview版本：2.3.2

回答

label(cc){
    return (h)=>{
        return h('div', [
            h('span', '标签一'),
            h('Badge', {
                props: {
                    count: cc
                }
            })
        ]);
    };}

HTML

<Tabs type="card" @on-click="navbarClick">
    <TabPane
         v-for="(item, index) in navbarList"
         :key="index"
         :name="item.name"
         :label="tabRender(item)"
    ></TabPane></Tabs>

JS

data() {
    return {
        tabRebder: data => {
            return h => {
                return h('div', [
                    h('span', { class: 'navbar-item-content' }, data.title),
                    h('Icon', { class: 'navbar-item-icon' }),
                ])       
            }
        }
    }}