提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
当我们使用el-tabs不要按照固化的思路去写每一页的具体内容,可以通过放在el-tabs外部,相同内容,来让代码更简洁
提示:以下是本篇文章代码,下面案例可供参考
文章来源:https://www.toymoban.com/news/detail-568847.html
二、代码如下(示例):
<el-tabs
v-model="formData.type"
@tab-click="onSubmit"
>
<el-tab-pane label="前部" name="1"> </el-tab-pane>
<el-tab-pane label="后部" name="2"> </el-tab-pane>
<el-tab-pane label="左部" name="3"> </el-tab-pane>
<el-tab-pane label="右部" name="4"> </el-tab-pane>
<el-tab-pane label="中部" name="5"> </el-tab-pane>
<el-tab-pane label="毛囊" name="6"> </el-tab-pane>
</el-tabs>
<el-image
v-for="(item, key) in personPhotos"
:key="key"
:src="item"
:preview-src-list="[item]"
></el-image>
export default {
name: "headRecord",
components: {},
props: {
guestId: {
type: Number,
},
},
data() {
return {
timeRange: [],
formData: {
type: "1",
},
personPhotos: [],
};
},
总结
提示:这里简单的介绍了一个el-tabs的使用技巧,希望大家可以少走弯路,文章来源地址https://www.toymoban.com/news/detail-568847.html
到了这里,关于element ui中el-tabs 标签页使用技巧的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!