蚂蚁金服antd-Table-可选择

最新推荐文章于 2025-03-25 18:01:03 发布

tianxia1202

最新推荐文章于 2025-03-25 18:01:03 发布

阅读量7.2k

点赞数 4

分类专栏：蚂蚁金服-antd-Table

本文链接：https://blog.youkuaiyun.com/tianxia1202/article/details/79188697

版权

该博客展示了如何在Ant Design的Table组件中实现选择功能，包括禁用特定行的选择和处理选择变化的回调函数。代码示例演示了设置选择框属性、监听选择变化以及全选、单选和反选的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * Created by mapbar_front on 2018/1/28.
 */

import React,{ Component } from 'react';
import { Table,Icon,Divider } from 'antd';
let data = [{
    key: 1,
    name: '花骨朵',
    age: 18,
    hobby: '看书',
},{
    key: 2,
    name: '天下',
    age: 22,
    hobby: '诗歌',
},{
    key: 3,
    name: '晓晓',
    age: 16,
    hobby: '旅游',
},{
    key: 4,
    name: 'Disabled User',
    age: 19,
    hobby: '禁止',
}]

let columns = [{
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
},{
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
},{
    title: '爱好',
    dataIndex: 'hobby',
    key: 'hobby',
}]
//这里的rowSelection即使为空也要定义，如果不写的话，会报这样的错误，'rowSelection' is not defined  no-undef'
const rowSelection = {
    //注意这里的radio需要加上引号。
    //type: 'radio',
    /