前言
项目中后端给的数据有时候不可能完全符合前端的数据要求,比如element-ui+vue项目组合中,下拉框数据是数组的形式。然而后端同事给的确是对象数据,当然你可以和后端协商改成你想要的数据… 但是这样往往比较麻烦,喜欢安静写代码的前端决定自己转换。
提示:正文内容
一、后端给的数据
二、如何转换
console.log('res:', res);
let resObj = res.data.data; //获取后台给的对象数据
let arr = []; //定义一个空数组
for (let key in resObj) {
//用for循环转换resObj对象
arr.push({
value: key,
label: resObj[key]
});
}
this.deviceList = arr; //将改数组赋值给数组deviceList,渲染到页面上
<el-form-item
label="报警类型"
prop="roomNumber"
>
<el-select
placeholder="请选择"
clearable
default-first-option
v-model="formInline.alarmDeviceType"
@change="onSearch"
>
<el-option
v-for="(list,k) in deviceList" //将数组渲染到页面上
:key="k"
:label="list.label"
:value="list.value"
></el-option>
</el-select>
</el-form-item>
三、最终结果
分享就到这里了,如果对你有帮助,不要忘记点赞哦!