vue3+antDesgin表格 点击按钮新增一行表格

<a-modal v-model:visible="CheckStandardVisible" title="配置内容" @ok="CheckStandardOk"  width="1000px" @cancel='cross'>
      <a-button type="dashed" @click="addCheckStandard">添加</a-button>
      <a-table  :data-source="dataSourceCheckStandard" :columns="columnsCheckStandard" :pagination="false" :showHeader="false" >
        <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex=='name'">
          <div class="lineAdd">
            <span style="width:50px">{{column.title + '：'}}</span>
            <a-input style="margin: -5px 0" v-model:value="record.name"/>
          </div>
        </template>
      <template v-if="column.dataIndex=='keyVal'">
          <div class="lineAdd">
            <span style="width:50px">{{column.title + '：'}}</span>
            <a-input style="margin: -5px 0" v-model:value="record.keyVal"/>
          </div>
      </template>
      <template v-if="column.key === 'action'">
       <span @click="onDelete(record.id)"><minus-circle-outlined style="fontSize:20px"/></span>
      </template>
        </template>
    </a-table>
    </a-modal>

我的表格是在弹窗中，设置一个按钮，去添加配置 刚开始的显示效果如下：

 点击添加生成一行表格

 

//表格配置
const columnsCheckStandard = ref([
  {
    title: '名称',
    key:'name',
    dataIndex: 'name',
  },
  {
    title: '值',
    key:"keyVal",
    dataIndex: 'keyVal',
  },
  {
    title: '删除按钮',
    key:'action',
    dataIndex: 'action',
  }
])
const dataSourceCheckStandard  = ref([])

const count = computed(() => dataSourceCheckStandard.value.length + 1);
const addCheckStandard = ()=>{  // 添加按钮
    const newData = {
        id: `${count.value}`,
        keyVal:'',
        name: '',
      };
      dataSourceCheckStandard.value.push(newData);
}
 const onDelete = id => {  // 表格最后的删除图标事件
      dataSourceCheckStandard.value = 
       dataSourceCheckStandard.value.filter(item => item.id !== id);
};