element ui 中el-form 改成多列

将element ui 中el-form 改成多列

el-dialog宽度设定

 width="850px"

el-form添加属性

:inline="true" class="demo-form-inline"

label-width="150px"

<!-- 添加或修改拍品信息对话框 -->
<el-dialog :title="title" :visible.sync="open" width="850px" append-to-body>
  <el-form :inline="true" class="demo-form-inline" ref="form" :model="form" :rules="rules" label-width="150px">
    <el-form-item label="华夏编号" prop="hxNo">
      <el-input v-model="form.hxNo" placeholder="请输入华夏编号" />
    </el-form-item>
    <el-form-item label="收拍日期" prop="collectDate">
      <el-date-picker clearable
        v-model="form.collectDate"          
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="请选择收拍日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="拍品编号" prop="auctionId">
      <el-input v-model="form.auctionId" placeholder="请输入拍品编号" />
    </el-form-item>
    <el-form-item label="拍品名称" prop="auctionName">
      <el-input v-model="form.auctionName" placeholder="请输入拍品名称" />
    </el-form-item>
    <el-form-item label="拍品数量" prop="auctionNum">
      <el-input v-model="form.auctionNum" placeholder="请输入拍品数量" />
    </el-form-item>
    <el-form-item label="拍品描述" prop="auctionDesc">
      <el-input v-model="form.auctionDesc" placeholder="请输入拍品描述" />
    </el-form-item>
    <el-form-item label="顾问意见" prop="advice">
      <el-input v-model="form.advice" placeholder="请输入顾问意见" />
    </el-form-item>
    <el-form-item label="参拍场次" prop="toAuctionNo">
      <el-date-picker clearable
        v-model="form.toAuctionNo"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="请选择参拍场次">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="保留价" prop="sysReservePrice">
      <el-input v-model="form.sysReservePrice" placeholder="请输入保留价" />
    </el-form-item>
    <el-form-item label="期望价" prop="customerExpectedPrice">
      <el-input v-model="form.customerExpectedPrice" placeholder="请输入期望价" />
    </el-form-item>
    <el-form-item label="评估价" prop="assessPrice">
      <el-input v-model="form.assessPrice" placeholder="请输入评估价" />
    </el-form-item>
    <el-form-item label="出品人" prop="publisher">
      <el-input v-model="form.publisher" placeholder="请输入出品人" />
    </el-form-item>
    <el-form-item label="华夏账号" prop="hxAcct">
      <el-input v-model="form.hxAcct" placeholder="请输入华夏账号" />
    </el-form-item>
    <el-form-item label="客户负责人" prop="customerCharge">
      <el-input v-model="form.customerCharge" placeholder="请输入客户负责人" />
    </el-form-item>
    <el-form-item label="是否送评" prop="sendReviewFlag">
      <el-input v-model="form.sendReviewFlag" placeholder="请输入是否送评" />
    </el-form-item>
    <el-form-item label="送评公司" prop="sendReviewCompany">
      <el-input v-model="form.sendReviewCompany" placeholder="请输入送评公司" />
    </el-form-item>
    <el-form-item label="评级/退回描述" prop="descp">
      <el-input v-model="form.descp" placeholder="请输入评级/退回描述" />
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input v-model="form.remark" placeholder="请输入备注" />
    </el-form-item>
  </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>

最后效果