<div class="table-card"><div class="card-steps-class"><el-tabsv-model="activeTabsIndex":before-leave="beforeHandleTabsClick"><el-tab-pane name="1" label="基础设置"><span slot="label"><span class="span-box"><el-tooltipclass="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-tooltipclass="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-tooltipclass="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;}},
}