vue3 el-table插槽|新增一行空数据的前端删除+后端删除

当表格中原有数据是有id的，但是新增一行的时候，数据没有存到数据库是没有id的

<template>
<el-button type="primary" @click="addSeniorityAndCredit">
     新增
</el-button>
<el-table :data="dataList" stripe>
<el-table-column label="序号" width="80px" type="index"/>
<el-table-column label="编号" width="80px" prop="code"/>
<el-table-column label="姓名" width="80px" prop="name"/>
<el-table-column label="姓名" width="80px" prop="remark"/>
    <el-table-column label="操作">
        <template #default="scope">
          <el-button
            v-hasPermi="['bpm:form:delete']"
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
</el-table>
<template>

新增一组空数据，当保存才给这行数据的id赋值

所以通过判断是否有id来判断前端删除还是去数据库删除

<script setup lang="ts">
const addSeniorityAndCredit = () => {
  dataList.push({
    id: null,
    code: null,
    name: '',
    remark: ''
  })
}
// 删除时判断
const handleDelete = (id) => {
  if (!id) {
    const index = dataList.findIndex((item) => !item.id)
    if (index !== -1) {
      dataList.splice(index, 1)
    }
  } else {
    console.log('调接口删一行', id)
  }
}