Vben Admin中table的添加与删除

html部分

<Form
  ref="formRef"
  :model="formState"
  :label-col="{ span: 6 }"
  :wrapper-col="{ span: 18 }"
  labelAlign="left"
  layout="inline"
  @finish="onAddFun"
 >
	<FormItem label="姓名" name="name">
		<Input v-model:value="formState.name" placeholder="请输入姓名" />
	</FormItem>
	<FormItem label="年龄" name="age">
		<Input v-model:value="formState.age" placeholder="请输入年龄" />
	</FormItem>
	<FormItem>
	    <Button type="primary" html-type="submit">添加</Button>
	 </FormItem>
</Form>
<BasicTable :bordered="false" @register="registerTable">
   <template #bodyCell="{ record, column }">
     <template v-if="column.key === 'action'">
       <TableAction
         :actions="[
           {
             label: '删除',
             color: 'error',
             onClick: handleDelete.bind(null, record),
           },
         ]"
       />
     </template>
   </template>
 </BasicTable>

引入

  import { ref } from 'vue';
  import { Form, FormItem, InputNumber, Button } from 'ant-design-vue';
  import { BasicTable, useTable, BasicColumn, TableAction } from '@/components/Table';
  
  const formState = ref({
    name: '',
    age: '',
  });
  const tableData = ref<any>([]);
  
  const columns: BasicColumn[] = [
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
    },
  ];
  const [registerTable, { setTableData, getDataSource }] = useTable({
    dataSource: tableData.value,
    columns,
    pagination: true,
    scroll: { y: 600 },
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    actionColumn: {
      width: 300,
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
    },
  });

添加 删除

	// 添加
  const onAddFun = (values) => {
    tableData.value.push({
      name: values.name,
      age: values.age,
      key: new Date().getTime(), // 时间戳当做key
    });
    setTableData(tableData.value);
    formState.value = {
      name: '',
      age: '',
    };
  };
    // 删除
  const handleDelete = (record) => {
    let key = tableData.value.findIndex((item: any) => item.key === record.key);
    tableData.value.splice(key, 1);
    setTableData(tableData.value);
  };