el-tab-pane label绑定数据
时间: 2023-08-13 10:29:12 浏览: 51
在使用 `el-tab-pane` 组件时,可以通过 `v-for` 指令循环绑定数据,然后使用 `v-bind` 指令将标签页的标题与数据绑定。具体实现方式如下:
```
<template>
<el-tabs v-model="activeTab">
<el-tab-pane v-for="(tab, index) in tabs" :key="index" :label="tab.label">
<p>{{ tab.content }}</p>
</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeTab: 'tab1',
tabs: [
{
label: 'Tab 1',
content: 'This is the content of Tab 1'
},
{
label: 'Tab 2',
content: 'This is the content of Tab 2'
},
{
label: 'Tab 3',
content: 'This is the content of Tab 3'
}
]
};
}
};
</script>
```
在上述代码中,使用 `v-for` 指令循环遍历 `tabs` 数组中的数据,然后在 `el-tab-pane` 组件上使用 `v-bind` 指令将标签页的标题与数组中的 `label` 字段绑定。这样就可以动态生成多个标签页,并且标签页的标题会根据数组中的数据自动更新。