一个在el-dialog里使用el-step的例子

一个在el-dialog里使用el-step的例子，

很多细节还要慢慢抠。

<el-dialog
          width="80%"
          :visible="dialogVisible">
          <el-steps :active="active" align-center >
              <el-step title="新建发布单" >
                <i class="el-icon-document" slot="icon" />
              </el-step>
            <el-step title="生成镜像" description="此镜像可再建发布单上线">
                <i class="el-icon-upload" slot="icon" />
                </el-step>
            <el-step title="上线" description="可多次上线不同环境的k8s集群">
                <i class="el-icon-refresh" slot="icon" />
                </el-step>
            <el-step title="完结" description="达到完成状态,发布单不可再操作">
                <i class="el-icon-sold-out" slot="icon" />
            </el-step>
          </el-steps>
          <br/>
          <br/>
          <div v-if='active===0'>
              <el-form
                :model="dataForm"
                label-width="100px"
                :rules="dataFormRules"
                ref="dataForm"
                :size="size"
                label-position="right">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="发布单" prop="name">
                            <el-input v-model="dataForm.name" :readonly=true auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                  <el-col :span="12">
                      <el-form-item label="描述" prop="description">
                          <el-input v-model="dataForm.description" :readonly="readonly" auto-complete="off"></el-input>
                      </el-form-item>
                  </el-col>
                </el-row>
                  <el-form-item label="ID" prop="id" v-if="false">
                      <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-row>
                      <el-col :span="12">
                          <el-form-item label="Git" prop="gitBranch">
                              <el-input v-model="dataForm.gitBranch" :readonly="readonly" auto-complete="off"></el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="构建参数" prop="build" >
                              <el-select v-model="dataForm.build"  placeholder="请选择" style="width: 100%;">
                                  <el-option v-for="item in build" :key="item.id" :label="item.name" :value="item.id"></el-option>
                              </el-select>
                          </el-form-item>        
                      </el-col>
                  </el-row>
              </el-form>
              <el-button type="danger" @click.native="save">保存</el-button>
              <el-button type="info" @click.native="createNext">下一步</el-button>
          </div>
          
         
          <el-form
            v-if='active===1'
            :model="dataForm"
            label-width="100px"
            ref="buildDockerForm"
            :size="size"
            label-position="right">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="发布单" prop="name">
                        <el-input v-model="dataForm.name" :readonly=true auto-complete="off"></el-input>
                    </el-form-item>
                </el-col>
            <el-col :span="12">
                <el-form-item label="描述" prop="description">
                    <el-input v-model="dataForm.description" :readonly=true auto-complete="off"></el-input>
                </el-form-item>
            </el-col>
            </el-row>
            <el-form-item label="ID" prop="id" v-if="false">
                <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
            </el-form-item>
            <el-button type="danger" @click.native="buildDocker">构建镜像</el-button>
            <el-button type="info" @click.native="buildNext">下一步</el-button>
          </el-form>
          
          <el-form 
            v-if='active===2'
            :model="dataForm"
            label-width="100px"
            ref="k8sDataForm"
            :size="size"
            label-position="right">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="发布单" prop="name">
                        <el-input v-model="dataForm.name" :readonly=true auto-complete="off"></el-input>
                    </el-form-item>
                </el-col>
            <el-col :span="12">
                <el-form-item label="描述" prop="description">
                    <el-input v-model="dataForm.description" :readonly=true auto-complete="off"></el-input>
                </el-form-item>
            </el-col>
            </el-row>
            <el-form-item label="ID" prop="id" v-if="false">
                <el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="K8s集群" prop="k8s" >
                        <el-select v-model="dataForm.k8s"  placeholder="请选择" style="width: 100%;">
                            <el-option v-for="item in k8s" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>    
                </el-col>
                <el-col :span="12">
                    <el-form-item label="Yaml模板" prop="yaml" >
                        <el-select v-model="dataForm.yaml"  placeholder="请选择" style="width: 100%;">
                            <el-option v-for="item in yaml" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>        
                </el-col>
            </el-row>
            <el-button type="danger" @click.native="deployK8s">集群部署</el-button>
            <el-button type="info" @click.native="finishDeploy">结单</el-button>
          </el-form>
          
          <el-form
          v-if='active===3'
            :model="dataForm"
            label-width="100px"
            ref="dataForm"
            :size="size"
            label-position="right">
           
            <el-button type="danger" @click.native="confirmFinish">确认结单</el-button>
          </el-form>
          
          <div slot="footer" class="dialog-footer">
              <el-button :size="size" @click.native="closeDialog">关闭</el-button>
          </div>
            
        </el-dialog>