iview框架table数据渲染问题

最近接手了一个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项，就这样写了，先记录一下，以后有更好的办法再来更新。