前提

业务上有需求，需要在表格中增加单选操作来显示该条数据的附加信息。因为 UI 组件库使用的 ant-design-vue，在看过 api后发现 table组件已经内置了相关功能。直接使用即可。

使用方式

新建一个table组件。主要设置两个参数一个是 rowKey,另外一个是 rowSelection。rowKey用来做当前行的唯一标识。而rowSelection有三个参数

1、selectedRowKeys：用来设置选中的数据
2、onChange：选中事件
3、type: 设置选中的类型可为 radio 或者 checkbox

在 methods 中设置相关的点击事件。即可设置其他的相关逻辑。

methods：{
    data(){
        return {
            checkedKeys: []
        }
    },
    handleRowClick(e) {
        this.checkedKeys = e
    }
}