动态增加el-tab-pane
时间: 2023-07-05 10:03:53 浏览: 106
动态增加Table 的行。
可以通过以下步骤动态增加 `el-tab-pane`:
1. 在 Vue 组件中定义一个数组,用于存储动态增加的 `el-tab-pane` 的数据。例如:
```javascript
data () {
return {
tabs: [
{ title: 'Tab 1', content: 'Content of Tab 1' },
{ title: 'Tab 2', content: 'Content of Tab 2' }
]
}
}
```
2. 在模板中使用 `el-tabs` 和 `el-tab-pane` 标签,将 `tabs` 数组中的数据渲染出来。例如:
```html
<el-tabs>
<el-tab-pane v-for="(tab, index) in tabs" :key="index" :label="tab.title">
{{ tab.content }}
</el-tab-pane>
</el-tabs>
```
3. 在需要动态增加 `el-tab-pane` 的时候,向 `tabs` 数组中添加一个新的数据项。例如:
```javascript
this.tabs.push({ title: 'Tab 3', content: 'Content of Tab 3' })
```
4. `el-tabs` 会自动更新,新增的 `el-tab-pane` 会显示在页面中。
如果需要删除 `el-tab-pane`,可以通过 `Array` 对象提供的删除方法来实现。例如:
```javascript
this.tabs.splice(index, 1)
```
其中 `index` 是要删除的 `el-tab-pane` 的下标。
阅读全文