el-tabs如何遍历数组
时间: 2023-09-21 13:03:42 浏览: 385
使用el-tabs组件进行数组遍历的方法是通过在el-tabs中使用el-tab-pane标签,并使用v-for指令来遍历数组。具体的代码如下所示:
```
<el-tabs v-model="tabActiveName">
<el-tab-pane v-for="(item, index) in tabApplicationList" :key="index" :label="item.name" :name="item.id" lazy>
<!-- 这里是每个选项卡的内容 -->
</el-tab-pane>
</el-tabs>
```
在上面的代码中,v-for="(item, index) in tabApplicationList"表示对tabApplicationList数组进行遍历,item是数组中的每个元素,index是当前元素的索引。然后,使用el-tab-pane标签来表示每个选项卡,通过绑定label属性来显示选项卡的名称,通过绑定name属性来设置选项卡的唯一标识。在el-tab-pane中可以添加任何想要展示的内容。
这样就可以实现el-tabs组件遍历数组的效果了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [手动动态改变el-tabs标签页顺序](https://download.csdn.net/download/weixin_45421804/85813374)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [el-tabs遍历数据展示对应内容](https://blog.csdn.net/kawayiyy123/article/details/113357673)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文
相关推荐
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![.zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)