父组件
<template>
<div class="app-container">
<el-steps :active="active" finish-status="success">
<el-step
v-for="(item,index) of stepTitle"
:key="index"
:title="item"
/>
</el-steps>
<!-- 基本信息-->
<essential-info v-show="active=='1'" @handleNextStep="handleNextStep()"></essential-info>
<!-- 费用条款-->
<fee-clause v-show="active=='2'" @handleLastStep="handleLastStep()" @handleNextStep="handleNextStep()"></fee-clause>
<!-- 合同文本-->
<contract-text v-show="active=='3'" @handleLastStep="handleLastStep()" ></contract-text>
</div>
</template>
<script>
import essentialInfo from "@/views/contract/contractManagement/components/steps/essentialInfo";
import feeClause from "@/views/contract/contractManagement/components/steps/feeClause";
import contractText from "@/views/contract/contractManagement/components/steps/contractText";
export default {
name: "AddContract",
components: {
essentialInfo,
feeClause,
contractText
},
data() {
return {
// 步骤
active: 1,
// 步骤标题
stepTitle: ['基本信息', '费用条款', '合同文本'],
}
},
methods: {
// 组件点击上一步
handleLastStep() {
this.active--
},
// 组件点击下一步
handleNextStep() {
this.active++
}
}
</script>
子组件1
<template>
<div class="app-container">
...
<div style="float: right;padding: 20px 0;">
<el-button type="primary" @click="handleNextStep()">下一步</el-button>
</div>
</div>
</template>
子组件2
<template>
<div class="app-container">
...
<el-row :gutter="20" style="float: right;padding: 20px 0;">
<el-col :span="24">
<el-button @click="handleLastStep()">上一步</el-button>
<el-button type="primary" @click="handleNextStep()">下一步</el-button>
</el-col>
</el-row>
</div>
</template>
// 点击上一步
handleLastStep() {
this.$emit('handleLastStep')
},
// 点击下一步
handleNextStep() {
this.$emit('handleNextStep')
}
子组件3
<template>
<div class="app-container">
...
<div style="float: right;padding: 20px 0;">
<el-button @click="cancel">取消</el-button>
<el-button @click="handleLastStep()">上一步</el-button>
<el-button type="primary" @click="saveData">保存</el-button>
</div>
</div>
</template>