ant + vue3 : a-select标签在编辑时,回显问题
ant+vue3 a-select 标签编辑时的数据回显问题记录
·
a-select a-select-option标签编辑时数据回显问题
第一种
<a-select
style="width: 100%"
placeholder="请选择"
:showSearch="true"
optionFilterProp="label"
v-model:value="formState.id"
>
<a-select-option value="1" label="四川">四川</a-select-option>
<a-select-option value="2" label="云南">四川</a-select-option>
<a-select-option value="3" label="贵州">四川</a-select-option>
</a-select>
上面这种就是最简单的了,通常我们后端返回的对应id,是一个int类型的值,而上面的value,它看做的是一个String类型,这时只需要通过".toString()" 或"id + “” "这些前端方法转成String就行;看下面代码:
function reload() {
clear();
Object.keys(formState).map(key => {
if (key === "beginTime" || key === "endTime") {
formState[key] = moment(props.record[key]);//这里是为了上面的时间做的类型转换
} else {
formState[key] = props.record[key].toString() //转为String 是为了上面选择器回显
}
});
}
##第二种:
还有一种就是通过接口动态获取下拉框所需要的选择列表:
<a-select
:disabled="instruction.isDisabled"
style="width: 100%"
placeholder="请选择渠道"
:showSearch="true"
optionFilterProp="label"
v-model:value="formState.channelId"
>
<a-select-option v-for="channel in data.allDataZ" key="channel.id" :value="channel.id.toString()"//这里转换是为了对应数据处理时的toString()
:label="channel.name">
{{ channel.name }}
</a-select-option>
</a-select>
上面这种就是通过循环后端传回来的数据,然后进行选择的,这里要注意的就是由于我们这时候的value是绑定的channel 对象的id,而这时的Value通常不再是String类型,所以我在做的时候当时为了图快,将所有返回数据都循环做了".toString()"处理,导致到这里又变成了数据类型不一致,所以我这里又将int类型的Value转为了String类型;
所以其实最后的回显都要数据类型相同,一般通过打断点就可以发现;如果不想通过Map循环处理数据,也可以这样:
function reload(){
//props.record是传过来的值
formState.picId = props.record.picId;
formState.productName = props.record.productName;
formState.picUrl = props.record.picUrl;
formState.picUrlOld = props.record.picUrl;
formState.picType = props.record.picType + "";
formState.picSort = props.record.picSort;
}
直接拿着返回的数据对象,挨个对应赋值,不对的就单个转换。
更多推荐
已为社区贡献1条内容
所有评论(0)