最近接手了一个vue+iview框架的运营管理系统,有一个需求是,有一个表格,表格的一列数据是固定的,其余数据接口返回。但是接口会返回给你一个数组,数组中只有表格的某几列。
要求是根据返回的数组,去渲染表格中相对应的那几列。
原始表格是这样的
id | 时间 | 状态 | 操作 |
---|---|---|---|
01 | 修改 | ||
02 | 修改 | ||
03 | 修改 | ||
04 | 修改 |
希望渲染的效果是这样的
id | 时间 | 状态 | 操作 |
---|---|---|---|
01 | 2021/7/1 | 成功 | 修改 |
02 | 2021/7/1 | 成功 | 修改 |
03 | 修改 | ||
04 | 修改 |
后端返回的数组是这样的
arr1= [
{
id:1,
time:2021/7/1,
status:1,
},
{
id:2,
time:2021/7/1,
status:1,
}
]
table的数据是动态渲染的,如果直接把返回的数组赋值给table的话,那就只有两项了。无法对其他项进行操作。
id | 时间 | 状态 | 操作 |
---|---|---|---|
01 | 2021/7/1 | 成功 | 修改 |
02 | 2021/7/1 | 成功 | 修改 |
所以现在就要处理数组了。数组要有4项,并且有修改记录的要更新表格数据。
直接上代码(这里有很多种方法,仅参考)
//原始数组
tableData: [
{
id: "01",
time: "",
status: "",
operation:""
},
{
id: "02",
time: "",
status: "",
},
{
id: "03",
time: "",
status: "",
},
],
//接口返回的数组
this.tableList = res.data.body.dataList
//循环初始数组
this.tableData.forEach((item,index)=>{
//循环返回的数组
this.tableList.forEach((item1,index1)=>{
//找到相同的项
if(item. === item1.){
//相同的话,就删除这一项,并把有数据的那一项放在这里
this.tableData.splice(index,1,item1)
}
})
})
至此,我实现了这个需求。如果数据多了的话,页面渲染有点慢,但我这个最多只有4项,就这样写了,先记录一下,以后有更好的办法再来更新。