开发避坑指南(37)：Vue3 标签页实现攻略

需求

Vue3+element ui如何实现多个标签页的展示与切换？如下图所示

实现方案

使用Tabs 组件实现，Tabs 组件提供了选项卡功能， 默认选中第一个标签页。代码如下：

<el-dialog :close-on-click-modal="false" :title="title" v-model="open" width="80%"  append-to-body>
<el-tabs><el-tab-pane label="订单信息" name="orderInfo">订单信息订单信息订单信息</el-tab-pane><el-tab-pane label="商品信息" name="goodsInfo">商品信息商品信息商品信息</el-tab-pane>
</el-tabs>
</el-dialog>

如果要指定默认选中某个名称的标签页，可以通过el-tabs标签的v-model来属性绑定，比如要默认选中商品信息标签页：

变量定义

//默认选中商品信息标签页
const activeTab = ref("goodsInfo");

模版页面el-tabs标签增加v-model属性绑定变量activeTab

<el-dialog :close-on-click-modal="false" :title="title" v-model="open" width="80%"  append-to-body>
<el-tabs v-model="activeTab"><el-tab-pane label="订单信息" name="orderInfo">订单信息订单信息订单信息</el-tab-pane><el-tab-pane label="商品信息" name="goodsInfo">商品信息商品信息商品信息</el-tab-pane>
</el-tabs>
</el-dialog>