vue-element 动态给select下拉框赋值却不匹配的问题
做项目的时候,改前人bug,遇到了个下拉框赋值问题,处理完记录一下下拉框赋值方式<el-form-item label="请选择税率" prop="rate"><el-select v-model="selectedRate" placeholder="请选择税率" @change="handleChangeRate" class="input-text"><el-o
·
做项目的时候,改前人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必须用数字类型来匹配,否则无法展示
更多推荐
已为社区贡献1条内容
所有评论(0)