<div class="table-card">
<div class="card-steps-class">
<el-tabs
v-model="activeTabsIndex"
:before-leave="beforeHandleTabsClick"
>
<el-tab-pane name="1" label="基础设置">
<span slot="label">
<span class="span-box">
<el-tooltip
class="item"
effect="dark"
content="基础设置 "
placement="bottom-start"
>
<i class="el-icon-question"></i>
</el-tooltip>
<span>基础设置</span>
</span>
</span>
</el-tab-pane>
<el-tab-pane name="2" label="流程设计">
<span slot="label">
<span class="span-box">
<el-tooltip
class="item"
effect="dark"
content="流程设计 "
placement="bottom-start"
>
<i class="el-icon-question"></i>
</el-tooltip>
<span>流程设计</span>
</span>
</span>
</el-tab-pane>
<el-tab-pane name="3" label="高级设置">
<span slot="label">
<span class="span-box">
<el-tooltip
class="item"
effect="dark"
content="高级设置 "
placement="bottom-start"
>
<i class="el-icon-question"></i>
</el-tooltip>
<span>高级设置</span>
</span>
</span>
</el-tab-pane>
</el-tabs>
</div>关键代码：
增加业务逻辑，调用子组件表单验证~~~
methods: {
beforeHandleTabsClick: function (index) {
if (this.activeTabsIndex === "1" && (index === "2" || index === "3")) {
let reValidState = this.$refs.baseForm.sumbitForm();
if (reValidState) {
this.activeTabsIndex = index;
return true;
}
return false;
} else if (
this.activeTabsIndex === "2" &&
(index === "1" || index === "3")
) {
return true;
}
},
}