回显问题，应该回显 label 却只显示了id

原因是，数据类型不匹配，导致，无法识别，才只显示了id

重点重点重点重点 注意看 重点啊

问题描述：

<el-col :span="12">
    <el-form-item label="中午吃啥" prop="lunch">
    <el-select v-model="wlong.lunch" placeholder="中午吃啥" size="small">
        <el-option
            v-for="(t, i) of lunchList"
            :key="i"
            :label="t.label"
            :value="t.value"  // 重点1， 显示的是 id，id的数据类型 是字符串
            ></el-option>
        </el-select>
    </el-form-item>
</el-col>


<script>
export default {
  data () {
    return {
      wlong: {
        lunch: '' // 重点2，回显的数据类型是 字符串 。 如果是 数字
      },
      lunchList: [
        {label: '西北风', value: '1'}, // 重点3， value 值是字符串，字符串，字符串，这也是字符串。如果是数字这里也应该是数字
        {label: '米饭', value: '2'},
        {label: '面条子', value: '3'}
      ]
    }
  },
}
</script>

但是回显出来的结果居然是这样的

总结：

    v-model绑定的这个字段，定义的是一个Integer类型，但是在el-option中我的value是一个字符串，所以 1 ！=  "1" ，这就导致这两个不能匹配，于是label值就显示不了，只能显示value的值。

    而其中的 :value ，其实是个缩写，这个缩写在 :value 前面隐去了v-bind。完整的语法应该是 v-bind:value ，而这个v-bind主要就用于属性绑定。以上是Vue官方提供的一个简写方式。

    综上所述，想要在回显的时候，使下拉框显示的是label值，则需要注意以上这个类型问题。

大佬神评 第二种方法

<el-col :span="12">
    <el-form-item label="中午吃啥" prop="lunch">
    <el-select v-model="wlong.lunch" placeholder="中午吃啥" size="small">
        <el-option
            v-for="(t, i) of lunchList"
            :key="i"
            :label="t.label"
            :value = 'parseInt(t.value)'   // 重点 parseInt()将value的字符串直接转成int类型
            ></el-option>
        </el-select>
    </el-form-item>
</el-col>