关于多tab切换场景“增删改查”的优化方案

业务场景：（如下图所示）

【从上图可以知道，这是很常见的多tab切换场景，切换时，下面的 table数据会发生变化，而且页面的上的操作按钮也需要在当前table页完成操作】

具体业务：（如下图所示）

优化前：（究极不科学，不推荐）

由于每个table的表头字段基本都不同，最初为了图省事，就v-if了6个table，来分别展示不同的table，后端就没怎么改动，只需要前端自己判断下就行了。
这样做的后果就是：代码沉积，垃圾代码太多了，看也看得心烦，更恐怖的是，如果是6个table，那么就应该有6个编辑的模态框，代码量更多了，而且本来这个tab就是动态的，要是后面要什么改动的话，真的会把心态搞崩的，严重影响摸鱼的时间。

优化后：

既然都说了，不能用多个table来分别展示，那就用一个table来展示呗，只是后端会稍微改一下，所以说以后和后端谁主动谁方便，
我直接把刀架在他脖子上，提出了几点关于这个地方的优化意见：

1. 表头的问题---------开始用6个table的时候我是写死的，现在要你返数据的时候把表头list给我，我自己来动态渲染
2. 既然表头都是动态的了，那么【新增】【编辑】这两个按钮点击的时候，你应该出一个单独的接口，让我优雅地获取到字段数据，格式我来定，达到 切换到每一类的时候，都能够 新增/编辑 对应的字段信息

效果如下图所示：

新增

编辑

代码局部分析：

1.1 表格数据格式
返回的data里面包含下面这些小标题和里面的数据

keys是需要传给后端的字段信息（顺序不会随浏览器的ASC码排序而打乱，如果是object，浏览器会对里面的key进行ASC排序）
names就是我需要遍历渲染的表头信息，
values就是table需要展示的数据

keys: ["auto_increment_id", "time_create", "serial", "opportunity_id", "name", "manufacturer", "model",…]
names: {
   time_create: "添加时间", serial: "设备唯一编码", opportunity_id: "商机编码", name: "设备名称", manufacturer: "生产厂家",…}
number: 5
total: 14
values: [,…]

1.2 v-for 对象，请求接口完成以后，需要对table的表头进行渲染

<el-table-column type="selection" width="55"></el-table-column>
<el-table-column type="index" width="55" label="序号"></el-table-column>
<el-table-column :prop="kk" :label="val" width="200" v-for="(val,kk,index) in t_header" :key="index"></el-table-column>
在data里面定义{
   
	t_header:{
   },