el-tab-pane label后加个数据
时间: 2023-08-13 07:29:12 浏览: 58
如果想在 `el-tab-pane` 的标签页标题后面添加一些数据,可以使用模板字符串和字符串拼接的方式来实现。具体实现方式如下:
```
<template>
<el-tabs v-model="activeTab">
<el-tab-pane v-for="(tab, index) in tabs" :key="index" :label="`${tab.label} (${tab.data})`">
<p>{{ tab.content }}</p>
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeTab: 'tab1',
tabs: [
{
label: 'Tab 1',
data: '10',
content: 'This is the content of Tab 1'
},
{
label: 'Tab 2',
data: '20',
content: 'This is the content of Tab 2'
},
{
label: 'Tab 3',
data: '30',
content: 'This is the content of Tab 3'
}
]
};
}
};
</script>
```
在上述代码中,使用模板字符串和字符串拼接的方式将 `tab.label` 和 `tab.data` 字段拼接起来,并作为 `el-tab-pane` 的标签页标题。这样就可以在标签页标题后面添加一些数据。