实现步骤

1. 定义步骤，需要几个定义几个
2. 构建form表单
3. 将表单项放到对应的步骤里
4. 设置切换上一步、下一步的按钮

注意：两个不同的form表单虽然在同一个dialog里，但是要设置不同的步骤、切换按钮。并且通过设置v-if属性让步骤条和按钮的显示与form表单的一致。

具体代码

<!-- 添加或修改检测委托单对话框 -->
    <el-dialog :title="title":close-on-click-modal="false" :visible.sync="open" width="900px" append-to-body @close="closeDialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <!--内部步骤条-->
        <el-steps :active="active" finish-status="success" v-if="formShowin" style="margin-left: 15px; margin-bottom: 15px">
          <el-step title="步骤 1"></el-step>
          <el-step title="步骤 2"></el-step>
          <el-step title="步骤 3"></el-step>
          <el-step title="步骤 4"></el-step>
        </el-steps>
        <!--外部部步骤条-->
        <el-steps :active="active" finish-status="success" v-if="formShowout" style="margin-left: 15px; margin-bottom: 15px">
          <el-step title="步骤 1"></el-step>
          <el-step title="步骤 2"></el-step>
          <el-step title="步骤 3"></el-step>
          <el-step title="步骤 4"></el-step>
        </el-steps>
        <el-form-item label="委托单类型" prop="inOrOut">
          <el-select v-model="form.inOrOut" @change="changeVal" placeholder="请选择委托单类型" clearable>
            <el-option
              v-for="dict in dict.type.in_or_out"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <!-- 内部委托单 -->
        <el-form ref="in" :model="form" :rules="rules" label-width="150px" v-if="formShowin">
          <!--step1-->
          <div v-show="active == 1">
            <el-row >
              <el-col :span="12">
                <el-form-item label="委托单位" prop="entrustUnit">
                  <el-input v-model="form.entrustUnit" placeholder="请输入委托单位" />
                </el-form-item>
              </el-col >
              <el-col :span="12">
                <el-form-item label="委托日期" prop="entrustDate">
                  <el-date-picker clearable
                                  v-model="form.entrustDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择委托日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="委托人姓名" prop="entrustName">
                  <el-input v-model="form.entrustName" placeholder="请输入委托人姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="委托人电话" prop="entrustPhone">
                  <el-input v-model="form.entrustPhone" placeholder="请输入委托人电话" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="检测物品名称" prop="productName">
                  <el-input v-model="form.productName" placeholder="请输入检测物品名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="研制阶段" prop="developPhase">
                  <el-input v-model="form.developPhase" placeholder="请输入研制阶段" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="检测物品编号" prop="productId">
                  <el-input v-model="form.productId" placeholder="请输入检测物品编号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="产品批次" prop="nProductPhase">
                  <el-input v-model="form.nProductPhase" placeholder="请输入产品批次" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="任务代号" prop="taskCode">
                  <el-input v-model="form.taskCode" placeholder="请输入任务代号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检测物品数量" prop="productNum">
                  <el-input v-model="form.productNum" placeholder="请输入检测物品数量" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!--step2-->
          <div v-show="active == 2">
            <el-row>
              <el-col :span="12">
                <el-form-item label="盖认可标识" prop="productLogo">
                  <el-select multiple @change="changeProductLogo" v-model="form.productLogo" placeholder="请选择盖认可标识">
                    <el-option
                      v-for="dict in dict.type.product_logo"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="附件数量" prop="annexNum">
                  <el-input v-model="form.annexNum" placeholder="请输入附件数量" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否为相机内参数" label-width="200px">
                  <el-switch
                    v-model="form.nIsInCamera"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="0"
                    :inactive-value="1"
                  >
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="相机内参数" prop="nIsCameraParameter" v-show="!form.nIsInCamera">
                  <el-input v-model="form.nIsCameraParameter" placeholder="请输入相机内参数" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="是否为相机外参数" label-width="200px">
                  <el-switch
                    v-model="form.nIsOutCamera"
                    active-color="#13ce66"
                    inactive-color="#ff4949"

                    :active-value="0"
                    :inactive-value="1"
                  >
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="相机外参数" prop="nOutCameraParameter"v-show="!form.nIsOutCamera">
                  <el-input v-model="form.nOutCameraParameter" placeholder="请输入相机外参数" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="是否有精度验证" label-width="200px">
                  <el-switch
                    v-model="form.nIsAccuracy"
                    active-color="#13ce66"
                    inactive-color="#ff4949"

                    :active-value="0"
                    :inactive-value="1"
                  >
                  </el-switch>
                  <!--<el-radio-group v-model="form.nIsAccuracy">
                   <el-radio
                  v-for="dict in dict.type.is_restricted"
                 :key="dict.value"
                  :label="parseInt(dict.value)"
                 >{{dict.label}}</el-radio>
                </el-radio-group>-->
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="精度验证" prop="nVarifyAccuracy"v-show="!form.nIsAccuracy">
                  <el-input v-model="form.nVarifyAccuracy" placeholder="请输入精度验证" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="是否有其他参数" label-width="200px">
                  <el-switch
                    v-model="form.nIsOtherParameter"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="0"
                    :inactive-value="1" >
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="其他参数" prop="nOtherParameter"v-show="!form.nIsOtherParameter">
                  <el-input v-model="form.nOtherParameter" placeholder="请输入其他参数" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="非固定场所" label-width="200px">
                  <el-switch
                    v-model="form.nonstationary"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="0"
                    :inactive-value="1">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="接收方承接岗位" prop="nUndertakePost">
                  <el-input v-model="form.nUndertakePost" placeholder="请输入接收方承接岗位" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!--step3-->
          <div v-show="active == 3">
            <el-row>
              <el-col :span="12">
                <el-form-item label="接收人" prop="undertakePerson">
                  <el-input v-model="form.undertakePerson" placeholder="请输入接收人" />
                </el-form-item>
              </el-col>
              <el-col :span="12">

                <el-form-item label="接收日期" prop="undertakeDate">
                  <el-date-picker clearable
                                  v-model="form.undertakeDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择接收日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否允许分包" label-width="200px">
                  <el-switch
                    v-model="form.allowSub"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="0"
                    :inactive-value="1">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="委托确定人" prop="entrustEnsureName">
                  <el-input v-model="form.entrustEnsureName" placeholder="请输入委托确定人" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="委托确定日期" prop="entrustEnsureDate">
                  <el-date-picker clearable
                                  v-model="form.entrustEnsureDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择委托确定日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="满意度调查" prop="satisfaction">
                  <el-select v-model="form.satisfaction" placeholder="请选择满意度调查">
                    <el-option
                      v-for="dict in dict.type.satisfaction"
                      :key="dict.value"
                      :label="dict.label"
                      :value="parseInt(dict.value)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="检测物品取走人" prop="itemsRemovePer">
                  <el-input v-model="form.itemsRemovePer" placeholder="请输入检测物品取走人" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检测物品取走日期" prop="itemsRemoveDate">
                  <el-date-picker clearable
                                  v-model="form.itemsRemoveDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择检测物品取走日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="检测报告取走人" prop="reportRemovePer">
                  <el-input v-model="form.reportRemovePer" placeholder="请输入检测报告取走人" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检测报告取走日期" prop="reportRemoveDate">
                  <el-date-picker clearable
                                  v-model="form.reportRemoveDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择检测报告取走日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!--step4-->
          <div v-show="active == 4">
          <el-row>
            <el-col :span="12">
              <el-form-item label="文件上传" prop="uploadFile" label-width="80px">
                <el-upload
                  class="upload-demo"
                  drag
                  :file-list="fileList"
                  :on-success="uploadSuccess"
                  :on-remove="remove"
                  action="http://localhost:8080/common/upload"
                  :headers="{Authorization:getToken()}"
                  multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="选择文件" label-width="80px">
                <el-checkbox-group v-model="form.fileSelect">
                  <el-checkbox :label="item.id"  v-for="(item,i) in files" :key="i">{{item.name}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>

          </el-row>
          </div>
        </el-form>
        <!--内部步骤按钮-->
        <div v-if="formShowin">
        <el-button type="primary" plain v-if="active < 4" style="margin-top: 15px; margin-left: 15px;" @click="next">下一步</el-button>
        <el-button type="primary" plain v-if="active > 1" style="margin-top: 15px; margin-left: 15px;" @click="pre">上一步</el-button>
        </div>
        <!-- 外部委托单 -->
        <el-form ref="out" :model="form" :rules="rules" label-width="150px" v-if="formShowout">
          <!--step1 -->
          <div v-show="active == 1">
            <el-row>
              <el-col :span="12">
                <el-form-item label="委托单位" prop="entrustUnit">
                  <el-input v-model="form.entrustUnit" placeholder="请输入委托单位" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="委托单位地址" prop="entrustUnitLocation">
                  <el-input v-model="form.entrustUnitLocation" placeholder="请输入委托单位地址" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="委托人姓名" prop="entrustName">
                  <el-input v-model="form.entrustName" placeholder="请输入委托人姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="委托日期" prop="entrustDate">
                  <el-date-picker clearable
                                  v-model="form.entrustDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择委托日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="委托人电话" prop="entrustPhone">
                  <el-input v-model="form.entrustPhone" placeholder="请输入委托人电话" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="委托人传真" prop="entrustFax">
                  <el-input v-model="form.entrustFax" placeholder="请输入委托人传真" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="检测物品名称" prop="productName">
                  <el-input v-model="form.productName" placeholder="请输入检测物品名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="研制阶段" prop="developPhase">
                  <el-input v-model="form.developPhase" placeholder="请输入研制阶段" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="检测物品编号" prop="productId">
                  <el-input v-model="form.productId" placeholder="请输入检测物品编号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否为密品" >
                  <el-switch
                    v-model="form.isSecret"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="0"
                    :inactive-value="1"
                  >
                  </el-switch>

                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="任务代号" prop="taskCode">
                  <el-input v-model="form.taskCode" placeholder="请输入任务代号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否出报告" >
                  <el-switch
                    v-model="form.isPer"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="0"
                    :inactive-value="1"
                  >
                  </el-switch>

                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!--step2 -->
          <div v-show="active == 2">
            <el-row>
              <el-col :span="12">
                <el-form-item label="检测物品数量" prop="productNum">
                  <el-input v-model="form.productNum" placeholder="请输入检测物品数量" />
                </el-form-item>
              </el-col>
              <!-- <el-form-item label="盖认可标识" prop="productLogo">
                <el-select v-model="form.productLogo" placeholder="请选择盖认可标识">
                  <el-option
                    v-for="dict in dict.type.product_logo"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item> -->
              <el-col :span="12">
                <el-form-item label="盖认可标识" prop="productLogo">
                  <el-select multiple @change="changeProductLogo" v-model="form.productLogo" placeholder="请选择盖认可标识">
                    <el-option
                      v-for="dict in dict.type.product_logo"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="检测物品外观是否合格"label-width="200px">
                  <el-switch
                    v-model="form.productAppear"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="0"
                    :inactive-value="1"
                  >
                  </el-switch>

                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检测物品不合格说明" prop="productDamageIllu">
                  <el-input v-model="form.productDamageIllu" placeholder="请输入检测物品不合格说明" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否急件" label-width="200px">
                  <el-switch
                    v-model="form.isUrgent"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="0"
                    :inactive-value="1"
                  >
                  </el-switch>

                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="附件数量" prop="annexNum">
                  <el-input v-model="form.annexNum" placeholder="请输入附件数量" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="取报告方式" prop="takeReportWay">
                  <el-select v-model="form.takeReportWay" placeholder="请选择取报告方式">
                    <el-option
                      v-for="dict in dict.type.take_report_way"
                      :key="dict.value"
                      :label="dict.label"
                      :value="parseInt(dict.value)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检测物品处置方式" prop="disposalItem">
                  <el-select v-model="form.disposalItem" placeholder="请选择检测物品处置方式">
                    <el-option
                      v-for="dict in dict.type.disposal_item"
                      :key="dict.value"
                      :label="dict.label"
                      :value="parseInt(dict.value)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="检测项目附加说明" prop="additionalInstructions">
                  <el-input v-model="form.additionalInstructions" placeholder="请输入检测项目附加说明" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="非固定场所" >
                  <el-switch
                    v-model="form.nonstationary"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="0"
                    :inactive-value="1"
                  >
                  </el-switch>

                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="接收人" prop="undertakePerson">
                  <el-input v-model="form.undertakePerson" placeholder="请输入接收人" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="接收日期" prop="undertakeDate">
                  <el-date-picker clearable
                                  v-model="form.undertakeDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择接收日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否允许分包" label-width="200px">
                  <el-switch
                    v-model="form.allowSub"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="0"
                    :inactive-value="1"
                  >
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="委托确定人" prop="entrustEnsureName">
                  <el-input v-model="form.entrustEnsureName" placeholder="请输入委托确定人" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!--step3 -->
          <div v-show="active == 3">
            <el-row>
              <el-col :span="12">
                <el-form-item label="委托确定日期" prop="entrustEnsureDate">
                  <el-date-picker clearable
                                  v-model="form.entrustEnsureDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择委托确定日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="满意度调查" prop="satisfaction">
                  <el-select v-model="form.satisfaction" placeholder="请选择满意度调查">
                    <el-option
                      v-for="dict in dict.type.satisfaction"
                      :key="dict.value"
                      :label="dict.label"
                      :value="parseInt(dict.value)"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="不满意理由" prop="dissatisfactionReason">
                  <el-input v-model="form.dissatisfactionReason" placeholder="请输入不满意理由" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检测物品取走人" prop="itemsRemovePer">
                  <el-input v-model="form.itemsRemovePer" placeholder="请输入检测物品取走人" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="检测物品取走日期" prop="itemsRemoveDate">
                  <el-date-picker clearable
                                  v-model="form.itemsRemoveDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择检测物品取走日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检测物品寄送人" prop="itemsSendPer">
                  <el-input v-model="form.itemsSendPer" placeholder="请输入检测物品寄送人" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="检测物品寄送人日期" prop="itemsSendDate">
                  <el-date-picker clearable
                                  v-model="form.itemsSendDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择检测物品寄送人日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检测报告取走人" prop="reportRemovePer">
                  <el-input v-model="form.reportRemovePer" placeholder="请输入检测报告取走人" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="检测报告取走日期" prop="reportRemoveDate">
                  <el-date-picker clearable
                                  v-model="form.reportRemoveDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择检测报告取走日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检测报告寄送人" prop="reportSendPer">
                  <el-input v-model="form.reportSendPer" placeholder="请输入检测报告寄送人" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="检测报告寄送日期" prop="reportSendDate">
                  <el-date-picker clearable
                                  v-model="form.reportSendDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  placeholder="请选择检测报告寄送日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!--step4 -->
          <div v-show="active == 4">
            <el-row>
            <el-col :span="12">
              <el-form-item label="文件上传" prop="uploadFile">
                <el-upload
                  class="upload-demo"
                  drag
                  :file-list="fileList"
                  :on-success="uploadSuccess"
                  action="http://localhost:8080/common/upload"
                  :headers="{Authorization:getToken()}"
                  multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="选择文件">
                <el-checkbox-group v-model="form.fileSelect">
                  <el-checkbox :label="item.id"  v-for="(item,i) in files" :key="i">{{item.name}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          </div>
        </el-form>
        <!--外部步骤按钮-->
        <div v-if="formShowout">
          <el-button type="primary" plain v-if="active < 4" style="margin-top: 15px; margin-left: 15px;" @click="next">下一步</el-button>
          <el-button type="primary" plain v-if="active > 1" style="margin-top: 15px; margin-left: 15px;" @click="pre">上一步</el-button>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

/** 步骤条下一步的方法 */
    next() {
      if (this.active++ > 3) this.active = 1
    },
    /** 步骤条上一步的方法 */
    pre() {
      if (this.active-- < 2) this.active = 1
    },

参考链接：
https://blog.csdn.net/qq_44413835/article/details/116722643