隐藏antd Table的选择框 单选和复选以及点击当前行选中

**隐藏 Antd Table 的选择框**

在使用 Ant Design 的 Table 组件时，我们经常需要对数据进行选择和操作。然而，Antd Table 默认会显示一个选择框，这可能不是我们想要的效果。特别是在某些场景下，我们只想让用户点击当前行就选中该行，而不需要显示选择框。

本文将介绍如何隐藏 Antd Table 的选择框，并实现单选和复选功能，以及点击当前行选中的效果。

**1. 隐藏选择框**

首先，我们需要在表格的配置中禁用选择功能。我们可以通过设置 `rowSelection` 为 `false` 来实现这一点。

jsximport React from 'react';
import { Table } from 'antd';

const columns = [
 {
 title: 'Name',
 dataIndex: 'name',
 key: 'name',
 },
 {
 title: 'Age',
 dataIndex: 'age',
 key: 'age',
 },
];

const data = [
 {
 name: 'John Brown',
 age:32,
 address: 'New York No.1 Lake Park',
 },
 {
 name: 'Jim Green',
 age:42,
 address: 'London No.1 Lake Park',
 },
];

function onChange(pagination, filters, sorter) {
 console.log('params', pagination, filters, sorter);
}

const App = () => (
  {
 console.log(record, selected);
 },
 onSelectAll: (selected, selectedRows) => {
 console.log(selected, selectedRows);
 },
 }}
 onChange={onChange}
 />
);

export default App;

在上面的代码中，我们设置 `rowSelection` 为 `{ type: 'radio' }`，这将禁用选择功能。

**2. 实现单选和复选功能**

要实现单选和复选功能，我们需要修改 `rowSelection` 的配置。我们可以通过设置 `type` 为 `'radio'` 或 `'checkbox'` 来实现这一点。
jsximport React from 'react';
import { Table } from 'antd';

const columns = [
 {
 title: 'Name',
 dataIndex: 'name',
 key: 'name',
 },
 {
 title: 'Age',
 dataIndex: 'age',
 key: 'age',
 },
];

const data = [
 {
 name: 'John Brown',
 age:32,
 address: 'New York No.1 Lake Park',
 },
 {
 name: 'Jim Green',
 age:42,
 address: 'London No.1 Lake Park',
 },
];

function onChange(pagination, filters, sorter) {
 console.log('params', pagination, filters, sorter);
}

const App = () => (
 
 {
 console.log(record, selected);
 },
 onSelectAll: (selected, selectedRows) => {
 console.log(selected, selectedRows);
 },
 }}
 onChange={onChange}
 />
);

export default App;

在上面的代码中，我们设置 `type` 为 `'radio'`，这将实现单选功能。

**3. 点击当前行选中**

要实现点击当前行选中的效果，我们需要修改 `rowSelection` 的配置。我们可以通过设置 `clickToSelect` 为 `true` 来实现这一点。
jsximport React from 'react';
import { Table } from 'antd';

const columns = [
 {
 title: 'Name',
 dataIndex: 'name',
 key: 'name',
 },
 {
 title: 'Age',
 dataIndex: 'age',
 key: 'age',
 },
];

const data = [
 {
 name: 'John Brown',
 age:32,
 address: 'New York No.1 Lake Park',
 },
 {
 name: 'Jim Green',
 age:42,
 address: 'London No.1 Lake Park',
 },
];

function onChange(pagination, filters, sorter) {
 console.log('params', pagination, filters, sorter);
}

const App = () => (
 
 {
 console.log(record, selected);
 },
 onSelectAll: (selected, selectedRows) => {
 console.log(selected, selectedRows);
 },
 clickToSelect: true,
 }}
 onChange={onChange}
 />
);

export default App;

在上面的代码中，我们设置 `clickToSelect` 为 `true`，这将实现点击当前行选中的效果。

通过以上的配置和修改，我们可以实现隐藏 Antd Table 的选择框、单选和复选功能，以及点击当前行选中的效果。 

                                上一条：无涯教程-jQuery  - html( )方法函数
                            

                            

                                下一条：click.stop 阻止事件冒泡
                


            相关标签：前端javascriptecmascript开发语言

        

            

                其他信息
            
            



                

                    

                    

                        

                            

                                
其他资源
                                



                                

                            
                        
                    
                
            
        






 
    
最新文章
    

        


                    打开英雄联盟提示d3dcompiler47.dll缺失怎么修复
                    Visual Studio2022报错 无法打开 源 文件 “openssl/conf.h“解决方式
                    CAS&Atomic原子操作详解
                    学好Elasticsearch系列-核心概念
                    JAVA基础-Stream流
                    CentOS 7 x86_64 制作openssh 9.3p2 rpm包修复安全漏洞 —— 筑梦之路
                    网络知识点之-堆叠与集群（1-堆叠）
                    SpringBoot 快速实现IP地址解析



        
    

 







    
热门标签
    
    

        

            Python
            Linux
            Docker
            Kubernetes
            云计算
            Android
            Java
            微服务
            分布式
            集群
            MySQL
            SQLServer
            MVC
            Vue
            js
            html
            nodejs
            canvas
            机器学习
            自动化测试
            多线程
            设计模式
            Redis
            .Net
            Unity3D
            大数据
            中间件
            枚举
            消息队列
            领域驱动设计
            截取字符串
            npm
        
    




    

        
        
欢迎提供和下载各类你熟悉的实例，感谢您对"实例吧"的支持，诚心接受各类问题反馈。
        
    


    
Top

        

            
 服务条款 | 网站地图 | 友情链接 | 问题反馈
           
            

                © 2021-2025 实例吧(shili8.cn) 版权所有  备案号:粤ICP备2024310174号-1

                 粤公网安备 44011102002787号