iview tab组件标题自定义

最新推荐文章于 2024-09-22 01:25:57 发布

咖喱&土豆

最新推荐文章于 2024-09-22 01:25:57 发布

阅读量503

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_35703552/article/details/121231355

版权

该博客介绍了如何在Vue项目中使用iview的Tabs组件，并通过自定义`setTabPaneLabel`函数来设置特定标签的样式。当标签内容为'公户车抵押'或'私户车抵押'时，标签会显示为红色并带有星号，其他标签则保持默认样式。示例代码展示了如何结合v-for循环动态创建TabPane，并通过label属性绑定自定义设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iview tab组件：

<Tabs v-model="selectedTab" type="card">
 <TabPane
          v-for="item in materialTypeList"
          :key="item.Id"
          :label="setTabPaneLabel(item.Name)"
          :name="item.Name"
      >
 </TabPane>
</Tabs>

//通过label绑定的事件进行自定义的设置
 setTabPaneLabel(label) {
	return(h) => {
	       let requireSet = null;
	       if (`${label}` === `公户车抵押` ||
	            `${label}` === `私户车抵押`
	        ) {
	            requireSet = h('span', {
	               style: {
	                    marginRight: '5px',
	                    color: 'red'
	               }
	
	            }, '*')
	        } else {
	            requireSet = null
	        }
	       return h('div', [requireSet, h('span', `${label}`)]);
	   };
 },