Element-ui下拉框

点击添加或修改是这样的界面显示

img


代码如下

      <el-form-item label="供暖类别">
        <el-select v-model="pays.pwid" placeholder="请选择">
          <el-option v-for="warms in warmsList" :key="warms.id" :label="warms.wunit" :value="warms.id">
          </el-option>
        </el-select>
      </el-form-item>

数据库里的字段

img

如何变成下边这样的形式,是文字而不是id

img

按照下面的方式写


<el-form-item label="供暖类别">
     <el-select v-model="pays.pwid" placeholder="请选择">
         <el-option v-for="item in warmsList"
                   :key=" item.id"
                   :label="item.wunit"
                   :value="item.id">{{item.wunit}}</el-option>
     </el-select>
</el-form-item>

value 就是id,label对应名称

img

label绑定文字,后台操作一下,把数据传过来绑定一下就可以了