关于element ui --Select 选择器回显问题

关于element ui Select 下拉框 选择器回显的问题

el-select下拉框

<el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

在vue中声明下拉框绑定的数据

 export default {
    data() {
      return {
        options: [{
          value: 1,
          label: '黄金糕'
        }, {
          value: 2,
          label: '双皮奶'
        }, {
          value: 3,
          label: '蚵仔煎'
        }, {
          value: 4,
          label: '龙须面'
        }, {
          value: 5,
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }

如果需要做element ui 的select回显，可以直接给data中定义的类型直接赋值，但在有时候会莫名其妙的失效，我在此提出这个问题的根本原因。

此时，在data中定义select下拉框的value值为number类型，如果需要回显的变量中的value中，不是当前data中options中对象.value的类型，会回显失败。

简单来说，需要回显的数据 —— options中的vaule的类型一定要 === 定义在data中的options中的vaule的类型。

如：

 export default {
    data() {
      return {
        options: [{
         // 为namber类型
          value: 1,
          label: '黄金糕'
        }],
        value: ''
      }
    }
  }



// 模拟请求回来的数据
options[
	{
		// 万万不可，会回显失败
		value: "1",
        label: '黄金糕'
	}
]

到此为止，如有不正确的地方，请各位大佬提出意见。。