element ui select 踩坑

今天用element ui 的select组件回显数据时没法正确匹配。

具体示例为：options为对象，对象的属性为value（number类型），属性值为label

代码以下：

<template>

<el-select v-model="value" placeholder="请选择">

<el-option :label="item" :value="index" v-for="(item, index) in options" :key="index"> </el-option>

</el-select>

</template>

<script>

export default {

data() {

return {

options: { 1: 字母A, 2: 字母B }, value: '' }

}

}

</script>

因为select组件默认将传过来的value设置为String类型，所以若直接这样写，数据没法匹配。选择器显示的值会变为字符串的数字，并无匹配到对应的属性值。（选择器对数据的显示就是若匹配到对应的value会显示相应的label；若没有匹配到，显示的是该value）。

所以若要该类数据正确显示，须要在获取到选择器应该显示的value以后，将value变为String类型。这样才能够正确显示。