vue-element 动态给select下拉框赋值却不匹配的问题

做项目的时候，改前人bug，遇到了个下拉框赋值问题，处理完记录一下

下拉框赋值方式

<el-form-item label="请选择税率" prop="rate">
    <el-select v-model="selectedRate" placeholder="请选择税率" @change="handleChangeRate" class="input-text">
     <el-option
         v-for="dict in rateDict"		// 遍历需要的数据列表
         :key="dict.dictValue"			// 使用v-for要加key，提效避错，固定写法，赋唯一值
         :label="dict.dictLabel"		// 下拉框显示的值
         :value="dict.dictValue"/>		// 实际处理的值，调用@change方法可看到
    </el-select>
</el-form-item>

数据：

data: {
    selectedRate: null,
    rateDict: [
        { dictValue: 0.06,  dictLabel: "6%"},
        { dictValue: 0.09,  dictLabel: "9%"},
        { dictValue: 0.13,  dictLabel: "13%"},
    ],
},
methods:{
    handleChangeRate(value){
        console.log(value)
    },
}

以上是正常的下拉框赋值案例。

问题

项目中，在页面初始化的时候，是调用字典接口查询赋值给rateDict字段的

created() {
    this.getDicts("tax_rate").then(response => {
        this.rateDict = response.data;
    })
}

然后点击查看详情的时候，给selectedRate字段赋值0.06，选择框却直接显示的是0.06，而不是6%

但是再次选择框框的时候，又展示成6%

虽说对计算没有什么影响，所以这个问题一直没处理。

解决

经过排查，发现字典表返回的数据，全是字符串类型

rateDict: [
    { dictValue: "0.06",  dictLabel: "6%"},
    { dictValue: "0.09",  dictLabel: "9%"},
    { dictValue: "0.13",  dictLabel: "13%"},
]

所以传数字类型0.06的时候，他与字符串“0.06”无法匹配，导致直接展示成0.06，而不是6%

解决

初始化的时候就将dictValue转化成数字类型

created() {
    this.getDicts("tax_rate").then(response => {
        response.data.forEach(item => {
            this.rateDict.push(
                {dictValue: Number(item.dictValue),   //这一步转化成数字类型
                 dictLabel: item.dictLabel})
        })
    });
}

总结

vue-element 的下拉框是类型敏感的，数字类型的value必须用数字类型来匹配，否则无法展示