antdv 带radio的table表格头反选

最近做了一个项目,其实使用的是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>
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值