iview中动态设置Tabs组件的label内容-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43810973/article/details/106434058

本文介绍如何在Vue的iview框架中动态地设置Tabs组件的标签(label)内容。通过响应式数据绑定和事件监听，可以实现根据业务需求实时更新Tabs标签。

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

<template>
	<div>
		<Tabs type="card">
			<TabPane :label="`标签${num1}`">标签0</TabPane>
			<TabPane :label="label1">标签一</TabPane>
			<TabPane :label="label2">标签二</TabPane>
			<TabPane :label="label3" icon="ios-leaf">标签三</TabPane>
			<TabPane :label="label4">标签四</TabPane>
			<TabPane :label="label5">标签五</TabPane>
			<TabPane :label="label6" class="label6">标签六</TabPane>
		</Tabs>
	</div>
</template>
<script>
export default {
	data() {
		return {
			num1: 1,
			num2: 2,
			num3: 'ios-leaf-outline',
			num4: 4,
			label1: (h) => {
				return [
					h('span', '标签一(' + this.num1 + ')')
				]
			},
			label2: (h) => {
				return [
					h('span', '标签二'),
					h('em', this.num2)
				]
			},
			label3: (h) => {
				return [
					h('Icon', {
						props: {
							type: this.num3
						}
					}),
					h('span', '标签三')
				]
			},
			label4: (h) => {
				return [
					h('span', '标签四'),
					h('Badge', {
						props: {
							count: this.num4
						}
					})
				]
			},
			label5: (h) => {
				return [
					h('span', {
						style: { color: '#ff0000' }
					}, '标签五')
				]
			},
			label6: (h) => {
				return [
					h('div', {
						style: {
							color: '#ffffff',
							background: '#ff0000'
						}
					}, '标签六')
				]
			}
		}
	}
}
</script>
<style lang="less">
.label6{
  background: #00ff00;
}
</style>