解决el-select使用v-model绑定的数据被赋值后，显示赋值内容，而不是el-option中对应value的内容

本文介绍: 解决 el–select 回显异常显示 option 选项的value 而不是显示 label _“下拉框设置 value–key没用 :value=”{ option id: item.id, op _Ja sonHPC的博客-CSDN博客 el–select ——el–option中 val ue、 label的显示问题 _el–option 回显示其它值_).(的博客-CSDN博客。

一些废话：

假期时候要做一个数据库课设，开发过程中在vue+element–ui的一些组件的使用上遇到了好多问题，该问题只是其中之一，令我十分苦恼，现将问题上传到博客，后续还会继续更新我遇到的一些问题。

原因：

后端传来的数据类型为int，而el-opt ion 绑定列表中val ue 值为‘ ‘字符串。

代码:

修改前：

stateList: [
        {
          value: '1',
          name: '运行中'
        },
        {
          value: '2',
          name: '已停运'
        }
      ],

&lt;el-form-item label="状态" prop="state"&gt;
        &lt;el-select v-model="form.state" placeholder="请选择"&gt;
          &lt;el-option
              v-for="item in stateList"
              :key="item.value"
              :label="item.name"
              :value="item.value"&gt;
          &lt;/el-option&gt;
        </el-select>
      </el-form-item>

后端传回form中的state为int类型转化为Number，与value=’1’不符,导致el-select 显示值不回显。

修改后：

stateList: [
        {
          value: 1,
          name: '运行中'
        },
        {
          value: 2,
          name: '已停运'
        }
      ],

<el-form-item label="状态" prop="state">
        <el-select v-model="form.state" placeholder="请选择">
          <el-option
              v-for="item in stateList"
              :key="item.value"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>