最近做了一个项目,其实使用的是antdv提供的rowSelection中的radio模式,但是这个有一个缺点,就是没有办法做反选,就是说,我想提供一个已经选中的值给到表格显示,让选中的表格的radio选中。
那既然antdv没有提供相应功能的话,我们就只能radio自己添加进去控制。
具体代码如下:
<template>
<div class="home">
<Table
:columns="columns"
:data-source="tableData"
rowKey="code"
>
<!-- 用原生的radio,判断这行数据是否和传入进来的数据相等,相等的情况下,为checked赋为true -->
<span slot="action" slot-scope="type, record">
<input
:checked="record.code === selectRadio"
type="radio"
name="radio"
@change="selectedRows(record)"
>
</span>
</Table>
</div>
</template>
<script>
import { Table } from 'ant-design-vue'
export default {
name: "Home",
components: {
Table
},
data() {
return {
columns: [
{
dataIndex: 'action',
key: 'action',
scopedSlots: { customRender: 'action' }
},
{
title: '编码',
dataIndex: 'code',
scopedSlots: { customRender: 'code' },
},
{
title: '姓名',
dataIndex: 'name',
scopedSlots: { customRender: 'name' }
},
{
title: '年龄',
dataIndex: 'age',
scopedSlots: { customRender: 'age' }
}
],
tableData: [
{
code: '1',
name: '小红',
age: 18
},
{
code: '2',
name: '小明',
age: 20
},
{
code: '3',
name: '小小',
age: 19
}
],
selectRadio: '1', // 默认展示的数据
};
},
methods: {
// 选择的radio的数据
selectedRows(data){
console.log(data);
}
},
};
</script>