＜a-table＞行数据增加点击事件并获取点击行的数据+自定义button按事件

先看代码：

在 Ant - Design - Vue 的<a - table>组件中，通过customRow属性可以为表格的每一行添加自定义的行为和样式。当设置customRow为一个返回包含onClick函数的对象的函数时，实际上是在为每一行添加一个点击事件监听器。
在a-table标签中添加 :customRow=“rowClick” 自定义样式
然后在ts中定义rowClick方法，方法内使用onClick监听点击事件，
实现的基本思路便是，在自定义样式中自定义监听事件，形参record是我们点击获取的行数据。
DataItem 是我自己定义的数据类型接口。
以前是面向对象，现在是面向接口，接口大于一切，规范化编程。

<template><a-tablebordered:columns="columns":data-source="data":scroll="{ x: 1500, y: 300 }":customRow="rowClick"><template #bodyCell="{ column, record }"><template v-if="column.key === 'operation'"><div style="display: flex; align-items: center"><a-button @click="handleEdit(record)" style="background-color: #598db4">修改</a-button><a-button @click="handleDelete(record)" style="background-color: #598db4">删除</a-button></div></template></template></a-table>
</template><script setup lang="ts">
import type { TableColumnsType } from 'ant-design-vue';
const columns: TableColumnsType = [{ title: 'Name', width: 100, dataIndex: 'name', key: 'name'},{ title: 'Age', width: 100, dataIndex: 'age', key: 'age'},{title: 'Action',key: 'operation',fixed: 'right',align: 'center',width: 200,},
];interface DataItem {key: number;name: string;age: number;
}const data: DataItem[] = [{key: 1,name: 'John',age: 32,},{key: 1,name: 'John',age: 32,},
];
const handleEdit = (record: DataItem) => {const rec = record;console.log(rec);
}
const handleDelete = (record: DataItem) => {const rec = record;console.log(rec);
}const  rowClick = (record: DataItem ) => {return {onClick: () => {const rec = record;console.log(rec)},}
}</script><style scoped></style>