elementUI中使用el-form-item时prop绑定多字段

但如果只是这样做的话，label前面没有红色的星号，我看到很多人都是直接这样用的，但我比较执拗，查了一下elementUI文档，发现el-form-item标签有一个required属性，试了一下果然可以显示一个红色的星号，至此问题完美解决。严格来讲，使用el-form-item时，是无法使用prop绑定多个字段，但业务中的需求是各式各样的，总会遇到这种情况，那就要想办法去实现它，毕竟东西是死人，

黑睿

6716人浏览 · 2022-09-06 19:26:38

黑睿 · 2022-09-06 19:26:38 发布

严格来讲，使用el-form-item时，是无法使用prop绑定多个字段，但业务中的需求是各式各样的，总会遇到这种情况，那就要想办法去实现它，毕竟东西是死人，我们人，是活的，要活学活用。

先上个图看看：

上图中省市区联动，还有经纬度，都是需要在同一行内，显示多个控件，并绑定多个字段的。

上代码：

<el-form ref="itemForm" :model="itemForm" :rules="itemFormRules" label-width="100px" size="mini">
      <el-row>
        <el-col :span="24">
          <el-form-item label="仓库名称" prop="name">
            <el-input placeholder="请输入仓库名称" v-model="itemForm.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="仓库地址" prop="addressDetail">
            <el-input placeholder="请输入仓库地址" v-model="itemForm.addressDetail" clearable></el-input>
          </el-form-item>
          <el-form-item label="所属地区" :required="true" :show-message="false">
            <el-row>
              <el-col :span="8">
                <el-form-item label-width="0" label="" prop="provinceCode" style="margin-bottom:0;">
                  <el-select v-model="itemForm.provinceCode" clearable placeholder="请选择省份" @change="provinceChange">
                    <el-option v-for="item in provinceList" :key="item.ID" :label="item.name" :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7" :offset="1">
                <el-form-item label-width="0" label="" prop="cityCode" style="margin-bottom:0;">
                  <el-select v-model="itemForm.cityCode" clearable placeholder="请选择城市" @change="cityChange"
                    :disabled="!itemForm.provinceCode">
                    <el-option v-for="item in cityList" :key="item.ID" :label="item.name" :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7" :offset="1">
                <el-form-item label-width="0" label="" prop="districtCode" style="margin-bottom:0;">
                  <el-select v-model="itemForm.districtCode" clearable placeholder="请选择街道/区"
                    :disabled="!itemForm.cityCode">
                    <el-option v-for="item in districtList" :key="item.ID" :label="item.name" :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="经纬度坐标" :required="true" :show-message="false">
            <el-row>
              <el-col :span="11">
                <el-form-item label-width="0" label="" prop="longitude" style="margin-bottom: 0;">
                  <el-input placeholder="请输入经度" v-model="itemForm.longitude" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2" align="center">-</el-col>
              <el-col :span="11">
                <el-form-item label-width="0" label="" prop="latitude" style="margin-bottom: 0;">
                  <el-input placeholder="请输入纬度" v-model="itemForm.latitude" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="0" align="center">
            <el-button size="medium" @click="dialogClose">取消</el-button>
            <el-button size="medium" type="primary" @click="formSubmit">提交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

看起来可能没有什么不同，但细节决定了关键，我是在el-form-item中嵌套了一个el-row分成多列，然后在每列中分别再放置一个el-form-item并且与字段绑定。

但如果只是这样做的话，label前面没有红色的星号，我看到很多人都是直接这样用的，但我比较执拗，查了一下elementUI文档，发现el-form-item标签有一个required属性，试了一下果然可以显示一个红色的星号，至此问题完美解决。

没什么技术含量，只是一些小技巧的组合而已，也只是今天才发现可以如此解决这个问题，在今天之前，其实我也是用其他方法凑合的，不过今天总算找到了正确的解决方案！！！