当前位置:网站首页>对象数据如何转化成数组
对象数据如何转化成数组
2022-07-25 09:20:00 【芳草斜阳_晨光】
前言
项目中后端给的数据有时候不可能完全符合前端的数据要求,比如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>
三、最终结果

分享就到这里了,如果对你有帮助,不要忘记点赞哦!
边栏推荐
猜你喜欢

CentOS changes MySQL database directory

@5-1 CCF 2019-12-1 报数

Ranking of data results in MySQL

Idea practical tips --- now change pom.xml (red) to pom.xml (blue)

uni-app如何获取位置信息(经纬度)

sqli-labs Basic Challenges Less1-10

使用nexus3发布yum私服(离线-内网)

Idea hot deployment
![[GYCTF2020]Ez_ Express](/img/ce/02b90708f215715bb53cacfd4c21f0.png)
[GYCTF2020]Ez_ Express

What are stand-alone, cluster and distributed?
随机推荐
What are stand-alone, cluster and distributed?
初始Flask以及简单地上手应用
最短路问题 Bellman-Ford(单源最短路径)(图解)
基本的网络知识
【代码源】每日一题 农田划分
【代码源】每日一题 三段式
@3-2 CCF 2020-12-2 期末预测之最佳阈值
分布式一致性协议之Raft
[selected] from simple to deep, you will understand MQ principles and application scenarios
What is the difference between mongodb and redis
C language and SQL Server database technology
The difference between abstract classes and interfaces (the most detailed)
Go基础1
什么是单机、集群与分布式?
[De1CTF 2019]SSRF Me
将list集合的某一字段拼接单个String
神经网络方法——美国波士顿房价(回归问题)
TCP网络应用程序开发流程
Click to hide the column in wechat applet, and then click to show it
『每日一问』LockSupport怎么实现线程等待、唤醒