elementui 一个dialog下的多个form表单与步骤条整合

已于 2022-10-26 11:33:00 修改
阅读量1.3k 收藏 3
点赞数 1
文章标签： elementui javascript 前端
于 2022-07-31 00:18:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43937851/article/details/126079744
版权

实现步骤

  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

碳酸水123
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【vue】Dialog嵌套表格并且可编辑或可多选
m0_46459413的博客
04-03 995
【vue】Dialog嵌套表格并且可编辑或可多选
若依框架 - 前端后端分离 vue element 组件模板 el-table 表格点击式可编辑表格 - 分页跳转回显（保存上一次的选择）- 按钮式可编辑表格- 弹窗表格 el-table 滚动条设置
Muxiu
04-11 2107
xxx.vue。
＜ elementUI组件样式及功能补全： 实现点击steps组件跳转对应步骤 ＞
一个平平无奇的技术宅
02-23 4997
在 Vue + elementUi 开发中，elementUI中steps步骤条组件只提供了change方法，并未提供各个步骤的点击跳转方法。在实际项目使用中，如果步骤条并非一步一步进行，而是有步骤跳转。那么就需要自己去自定义DIY了。接下来，简单阐述下，开发中使用方法！
ElementUI浅尝辄止27：Steps 步骤条
渣渣砖
09-05 3016
引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。
ElementUI的el-dialog组件嵌套form表单
最新发布
两年半前端练习生的博客
10-18 945
【代码】ElementUI的el-dialog组件嵌套form表单。
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
一个支持ff的modaldialog的js代码
10-31
一个支持ff的modaldialog的js代码
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
12-28
1、首先在你的对话框 取消按钮 加一个click事件，例如：（ps:：callOf里面的addGroupData和ref一 一对应起来） <div slot=footer class=dialog-footer> 　(>取 消 <el-button type=primary @click=addgroupList...
element的步骤条整合表单（steps+form）
热门推荐
suqinyi的博客
05-12 1万+
先上效果图： element ui 组件库官网 使用步骤： 1、页面组合步骤 ==> 5步 定义出4个步骤（看你自己需要几步） 定义form表单 定义4个盒子对象active属性 => 1 到 4 放置表单项 设置上一步和下一步的按钮 <template> //第一步:定义出4个步骤 <el-steps :active="active" finish-status="success"> <el-step title="第一步" />
ElementUi Steps 步骤条的使用
MrWangisgoodboy的博客
06-23 7812
ElementUi Steps 步骤条的使用
elementUi中steps步骤条的使用
ME_GIRL的博客
01-09 5857
elementUi中steps步骤条的使用 引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。 使用 <template> <div class="contentBox"> <div> <div class="stepContent"> <div class="stepBgBox"> <div class="stepBox">
elementUI Steps 步骤条 样式以及方法使用
weixin_36723038的博客
01-31 4402
elementUI步骤条，CSS改变步骤条状态样式
vue 父组件获取子组件的dialog的嵌套表单通过$refs
m0_70441018的博客
08-30 240
1）子组件的form表单 设置ref="updateForm"2）父组件中引用，随意设置ref的值。3）父组件中methods。
ElementUI的弹窗实现步骤条，步骤1，步骤二
有时间可以指导毕业设计，可以私聊我。一个热爱编程的smallCuteMonkey，可以私信我
04-23 3568
使用组件 el-steps,里面有上一步和下下一步的方法 控制组件 的显示v-show 或者v-if 在他们的方法里面改变显示的状态 点击一下一步切换显示的表单 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="static/css/admin.css" rel="stylesheet" t.
Element UI 的 el-steps 实现竖直方向的步骤条设置成虚线，并显示出最后一步的连接线
qq_44716001的博客
06-30 1421
【代码】Element UI 的 el-steps 组件中实现竖直方向的步骤条，并显示出最后一步的连接线。
elementui步骤条自定义点击跳转页面，返回步骤条保留信息
qq_52959651的博客
09-02 5098
先看效果图 如果没有点击下一步，步骤条将不可点击，点击下一步可返回上一步，步骤条也可以来回点击跳转页面，还可以转到其他页面，回来后步骤条依然没有改变，保留状态，这个是我自己想的方法，可能有一些不太对，但是我这边大致功能都能实现，如果有什么问题可以指出。 代码 这是我的目录结构，现实中根据你项目需求来 91.vue(起名不规范，这是我专门的测试页面) 步骤条单独是一个组件 <template> <div class="main"> <el-button typ
对于页面有步骤下一步保存处理
Marzlam的博客
10-10 462
有步骤的页面一并保存思路
Vue2+element动态弹框表单组件--配置化--低代码（公司内部统一化）
qq_41068362的博客
03-11 4423
动态表单弹框--可json配置化、低代码、自由度高、容易使用。
elementui多个dialog
04-28
ElementUI是一款基于Vue.js的组件库，其中包括了很多实用的组件，其中包括Dialog组件，可以用来实现弹窗效果。对于多个Dialog的情况，我们可以采用以下几种方式： 1.使用不同的组件命名，使得每个Dialog有不同的名字。这种方式适用于Dialog较少的情况，如果有大量的Dialog出现，这种方式可能不太便于管理，不利于代码的复用。 2.将Dialog组件抽象为一个独立的模块，在需要的时候动态加载。这种方式可以灵活地控制Dialog的数量，并且可以根据需要随时添加或删除Dialog。 3.使用Vue.js提供的组件通信机制，例如Event Bus或者Vuex，将多个Dialog组件之间进行通信。这种方式可以实现Dialog组件之间的数据交换、状态管理等操作，但是需要考虑好组件之间的耦合关系，以免影响整个应用的性能和稳定性。 总体来说，对于多个Dialog组件的处理，我们需要根据具体的使用场景和需求来选择最合适的方式，同时要注意代码的可维护性和扩展性，以便后续的开发和维护。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值