前端表格添加多条数据，批量提交的场景，如何维护？

Question

如下场景，一个表格，手动的去新增数据，一条一条的，在前端操作保存，编辑，最后整个table数据一块提交给后端。

其中
数据表根据数据库选择变化，字段依据表的选择而改变，新增一条保存下来
再点新增，继续，一个一个的选择，保存
大佬们对于这种场景，整个表格的数据怎么维护好呢？

我现在是每一条都记录下了
{ 数据库列表，数据库选中项id，数据表列表，表选中项id，字段列表，选中字段的id ...}
我感觉这样好麻烦，请问有没有好点的思路吗

Answer 1

增删改查分开不可以吗，四个接口

Answer 2

interface xxx{
 title?:string
 type?:number
}

const temp=ref<xxx[]>({})

// 新增选项
const add=()=>{
    temp.value.push({})
}

// 删除
const delete(num:number)=>{
 // 更具下标删除数组元素
}

template 遍历

   <button>新增</button>
    <div v-for(k,i in temp)>
        <input v-model=k.title>
        <input v-model=k.type>
        <button @click(delete(i))>删除</button>
   </div>

Answer 3

如果是单条即时保存的，那么就是 增删改（单条记录） 独立接口

如果是前端多次操作后，批量保存的，那么就是 批量更新一个接口

每条记录 增加一个操作类型字段（CREATE / UPDATE / DELETE）

至于前端代码，这也没啥复杂的，苦力活罢了