Ant Design Table 添加操作列：如何实现删除当前行数据

本文将介绍如何在 Ant Design Table 中添加操作列，并实现点击按钮删除当前行数据的功能。

实现步骤

在prjColumns中新增一个对象，用于定义操作列。 每个操作列可以包含一个按钮，点击按钮时可以触发删除当前行数据的操作。
在操作列中使用slots属性指定自定义渲染函数。 例如，你可以将自定义渲染函数命名为'actions'，以便在每行中渲染操作按钮。
在模板中定义操作按钮的样式和行为。 你可以使用a-button或其他按钮组件，并将deleteRow方法作为点击事件的处理函数传递给按钮。
当点击按钮时，调用deleteRow方法，并传入当前行的数据作为参数。 deleteRow方法可以根据需要修改来实现删除当前行数据的操作逻辑。

代码示例

setup() {
  const prjColumns = ref([
    { title: '名称', dataIndex: 'prjname', key: 'prjname', width: '120px' },
    { title: '单位', dataIndex: 'unitname', key: 'unitname', width: '100px' },
    { title: '单价', dataIndex: 'price', key: 'price', width: '100px' },
    { title: '产地', dataIndex: 'ypcd', key: 'ypcd', width: '150px' },
    { title: '单位剂量', dataIndex: 'yxhl', key: 'yxhl', width: '120px' },
    { title: '自付比例', dataIndex: 'zfbl', key: 'zfbl', width: '120px' },
    { title: '适应症', dataIndex: 'syz', key: 'syz', width: '150px' },
    { title: '院内编码', dataIndex: 'bwm', key: 'bwm', width: '200px' },
    {
      title: '操作',
      key: 'actions',
      width: '100px',
      slots: { customRender: 'actions' }
    }
  ]);

  const deleteRow = (record) => {
    // 删除当前行数据的操作逻辑
    console.log('删除行:', record);
  };

  return {
    prjColumns,
    deleteRow
  };
}

模板示例

<a-table :columns="prjColumns" :data-source="yourDataSource">
  <template #actions="{ record }">
    <a-button type="danger" @click="deleteRow(record)">删除</a-button>
  </template>
</a-table>

注意事项

yourDataSource是你的表格数据源。
在渲染操作按钮的模板中，使用#actions指定了自定义渲染函数的插槽名为'actions'。
在该插槽中，通过record参数获取当前行的数据，然后将其作为参数传递给deleteRow方法。
你可以根据需要修改deleteRow方法来实现删除当前行数据的操作逻辑。