ant design vue中select数据回显问题

原创
2019/09/26 10:03
阅读数 2.7K

今早在对form使用setFieldsValue赋值时,select框中只显示了我赋的value值,没有跟option匹配,不显示lable

查文档,用了lableInValue也无果(大概本前端萌新不会用吧QAQ)

表单元素select如下

          <a-form-item class="mb10" label="数据类型" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
            <a-select v-decorator="['valueType',{rules: [{ required: true, message: '请选择类型' }]}]">
              <a-select-option value="1">字符</a-select-option>
              <a-select-option value="2">数值</a-select-option>
            </a-select>
          </a-form-item>

 

解决方案:

在赋值时转为字符串类型,应该是数字类型与option的value值不匹配导致,转为字符串类型后完美解决

        this.dictDataForm.setFieldsValue({
          'dictCode': row.dictCode,
          'dictVal': row.dictVal,
          'dictText': row.dictText,
          'valueType': row.valueType + '' // 转字符串,否则无法匹配value回显
        })

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
我这边是动态渲染的select。value的值是string(字典表中存的 值固定都写的是数字)类型 存到业务表是int类型。所以导致了类型不一样就不会回显正常了。加载数据的时候把value的类型 强制转换为业务表中一样的类型即可解决
httpAction(httpurl, formData, method).then((res) => {
console.log(res)
if (res.success) {
const result = res.result
result.forEach((r) => {
this.modelTypeDatas.push({
value: parseInt(r.value),
text: r.text
})
})
}
})
03/20 10:52
回复
举报
this.dictDataForm.setFieldsValue 具体写在哪里呢?
03/20 09:56
回复
举报
更多评论
打赏
2 评论
0 收藏
0
分享
返回顶部
顶部