table设计批量添加操作并返回给后端

本次操作使用的是Vue3实现的页面效果，也包括了前端封装的API和后端的接口，这种table批量添加的操作在一些系统中应用的也比较广泛，由于网上有很少类似的实际案例，所以小编在此给大家奉上，大家也可以收藏一下，以便开发中可以直接CV操作，效果图如下：

---

好了，其它话不多说，直接上代码：

vue页面：

<el-form ref="form" :model="formData" label-width="80px">
          <el-table :data="tableData" style="margin-top: 20px;">
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column prop="name" label="姓名">
              <template #default="{row}">
                <el-input v-model="row.name" placeholder="请输入姓名" />
              </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄">
              <template #default="{row}">
                <el-input v-model="row.age" placeholder="请输入年龄" />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-button type="danger" @click="deleteRow(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px;">
            <el-button type="primary" @click="addRow">新增一条</el-button>
            <el-button type="primary" @click="submitForms">保存</el-button>
          </div>
        </el-form>

详细讲解：

可根据自己需求，直接在<el-table>中添加你所需要的字段，<el-table-column>标签中的label属性的内容是table显示的字段名称，可以根据自己需要在<template>标签中编辑输入框，下拉框等等，<template #default="{row}"></template>用来将表单每行数据进行分割，如果没有分割，就会造成每行对应字段的输入框输入时全都会同步，填写后的所有数据会保存在tableData中。

js代码：

const formData = ref({
  name: '',
  age: null
})
const tableData = ref([])

// 点击动态新增
const addRow = () => {
  tableData.value.push({
    name: '',
    age: null
  })
}
// 点击删除，删除一行
const deleteRow = (row: any) => {
  const index = tableData.value.indexOf(row)
  if (index !== -1) {
    tableData.value.splice(index, 1)
  }
}
// 保存按钮
const submitForms = () => {
  console.log(tableData.value)
  // 向后端传入批量数据
  batchAdds(tableData.value);
  // 别忘记调用你的查询方法，保存后直接显示
}

详细讲解：

声明的tableData用来储存数据，addRow方法点击后可以新增一条数据，deleteRow方法用于删除一行数据，submitForms用于保存并调用封装的api传给后端。

api：

/**
 * 新增批量数据
 */
export const batchAdds = (data: tableForm[]) => {
  return request({
    url: '你的后端接口',
    method: 'post',
    data: data
  })
}

后端代码：

 @PostMapping("/adds")
    public R<Void> batchAdd(@RequestBody List<你封装的对应实体类> list){
        // 遍历接收到的数据
        list.forEach(System.out::println);
        // 调用你的业务层实现业务逻辑

        return toAjax(ispass);
    }

---

好了，以上就是本次内容了，如果觉得对你有用的话，给小编点个赞鼓励一下吧，顺便收藏一下，防止以后开发中想用却找不到喽~