rowSelection实现复选框的单选功能

最新推荐文章于 2024-08-08 20:54:02 发布

weixin_44466630

最新推荐文章于 2024-08-08 20:54:02 发布

阅读量2.8k

点赞数 1

分类专栏：前端文章标签：前端 ant react b表单

本文链接：https://blog.csdn.net/weixin_44466630/article/details/100735352

版权

本文介绍了如何在Ant Design表格中实现复选框的单选效果，包括通过设置CSS属性`visibility:hidden`去除首行全选按钮，以及添加逻辑判断实现单选功能。

摘要由CSDN通过智能技术生成

rowSelection实现复选框的单选功能

rowSelection实现复选框的单选功能
- 第一步：去掉首行的复选框按钮
- 第二步：设置复选框的单选功能

rowSelection实现复选框的单选功能

由于工作上的要求，现在需要使用复选框的样式，但是功能是只能单选的，所以表格的头部要去掉全选全不选的按钮，ant design上面有复选框但是不符合我的业务需求，所以自己做了一下改变
原型图需要实现的效果

第一步：去掉首行的复选框按钮

本来是想用css的display：none的但是这样之后，后面的行就会错位，看起来不好看，所以选择的visibilty:hidden来占位

//checks2是我给table起的class名
.checks2 {
   
      thead tr th label{
   
        visibility: hidden;
   }
}

第二步：设置复选框的单选

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_44466630

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue table多选框改为单选功能实现

weixin_42066070的博客

12-30

1565

<el-table ref="tb" v-loading="loading" :data="infoList" @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55" align="center" /> <el-table-column label=.

antd 表格的多选/单选框：rowSelection

汤迷的博客

02-26

7778

获取选中的框{ 1、定义在rowSelection中,然后监听onChange事件，给selectedRowKeys赋值 rowSelection:{type:'radio',onChange: this.selectChange,getCheckboxProps:this.getCheckboxProps,selectedRowKeys:[]} selectChange (...

参与评论您还未登录，请先登录后发表或查看评论

解决vxe-table通过setCheckboxRow方法一次性改变多个节点选中状态导致页面卡死的问题

最新发布

Y_seaboy的博客

08-08

315

解决vxe-table调用setCheckboxRow方法导致页面卡死问题

antdv表格的rowSelection设置单选禁用选中等

weixin_42971933的博客

05-25

5976

这个问题在项目中已经遇到过两次了：一次为表格想实现单选-禁用等另一次则是今天，遇上需求需要在初始化表格的时候默认选中项目鉴于自己的记性太差，记录记录，万一哪天又遇到这个问题心血来潮来翻了一翻博客，那问题就解决了！犹记得实现表格项单选和禁用的需求出来的时候，我翻遍了百度，好多问题感觉快说道点子上了，结果就还真是差一点。这个问题折磨我很久，我觉得我怕是要完不成了，结果技术总监远程要求我翻官方文档，最后劲直停在了API列表中的 type="radio" ，我瞬间石化了有没有！之尴尬，所以还是

antd protable实现表格单选

前端劝退工程师

10-12

3606

protable的rowSelection属性开启后可以对table进行批量操作改造为单选关键代码 rowSelection={{ onChange:(ls)=>{ if(ls.length>1){ ls.shift() } } }} 去掉多选框 className={{style.table}} . . . .table{ thead tr

Antd for Vue表格（table）全选时只选择某个状态的数据

qq_40110620的博客

08-27

899

先看效果：我明明点的全选，却只选了三个，因为要求保留全选删除的功能，但是还希望某些状态下的数据不能删除，即全选时过滤掉，看代码: <template> <a-table ref="table" size="middle" bordered rowKey="id" class="j-table-force-nowrap" :scroll="{x:true}" .

antd-table：通过rowClassName实现斑马条纹样式+通过rowSelection实现单选功能效果——基础积累

yehaocheng520的博客

12-18

1190

antd-table：通过rowClassName实现斑马条纹样式+通过rowSelection实现单选功能效果——基础积累

带复选框的表格（ant design）

CarinaYang的博客

04-20

8615

要写个带复选框的表格，效果如下：然而在官网看到这代码有点无语：const data = []; for (let i = 0; i < 46; i++) { data.push({ key: i, name: `Edward King ${i}`, age: 32, address: `London, Park Lane no. ${i}`, }); ...

给我用React 函数组件封装一个 ant table的表格要求只封装table的组件封装的功能包括是否显示单选复选框 斑马线等属性耦合度低数据用死数据达到效果开箱即用

05-18

type: 'checkbox', // 默认为单选，可选值为 'radio' 或 'checkbox' onChange: (selectedRowKeys, selectedRows) => { console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); }...

antd Table表格点击行选中前面的选择框

土匪丁的博客

03-21

2612

:row-selection=“rowSelection“ 清除勾选复选框

qq_36428598的博客

08-24

414

【代码】:row-selection=“rowSelection“ 清除勾选复选框。

vue elementUI实现el-table点击行单选，点击行多选，点击复选框单选效果

qq_35815246的博客

08-23

5556

vue elementUI实现el-table点击行单选，点击行多选，点击复选框单选效果

antd:table表格实现单选功能——基础积累

yehaocheng520的博客

12-17

8771

前一段时间，在弄antd的框架，感觉MVVM的写法真的很香。组件各种封装。遇到一个需求：需要实现table表格的单选功能：代码如下： 1.html部分的代码 <a-table :columns="taskOrderColumns" :dataSource="taskOrders" :rowKey="(r,i)=>{i.toString()}" :pagination="false" :row-selection="{ selectedRowKeys: selec

antd table单行选中和去除复选框的实现

阿鸥饿了

12-07

4881

Table组件中的复选框是由rowSelection={rowSelection}来控制的。 1、若实现单选，只需要在绑定事件中加: type=radio； 2、若实现去掉复选，点击行选中，则去掉rowSelection={rowSelection}，更改为onRowClick - {this.onRowClick}，选中行事件即可。 ...

antd table rowSelection多选框(可选择列表)

热门推荐

MYG_G

11-11

2万+

可选择列表如上图，是antd的可选择列表，我们如何将普通列表变成可选择列表呢，这就用到了一个很重要的属性rowSelection。 rowSelection 如下图，rowSelection属性是一个对象，他有很多的参数。下面是antd官网截图，关于rowSelection的功能配置。指定可选择列的属性作为key 注意：其中有个很重要的点,就是selectedRowKeys默认取得是列表的第一项，如果你想指定key,就要在table增加rowKey={record => record.id}

vue中 a-table自定义选项row-selection，解决不能选中的问题或者跳转页码时前面勾选的内容会不再勾选的问题。

qq_56938323的博客

08-02

2188

不能进行勾选或第二页勾选后，第一页勾选过的都清除了。

antd-vue - - - - - row-selection的使用

Dark_programmer的博客

05-08

2419

row-selection的使用

Antd Table Pro框架Protable组件中rowSelection方法的一个坑

test的博客

04-06

743

就一个点，非常坑，在你的protable组件里有个方法rowKey的值改为：{record => record.gnlkid}首先上截图看我遇到的问题跟你是否一样，全选了，还是提示就选了1个。注意gnlkid是你接口返回值中代表该行数据的唯一值，比如有些是id等等。

rowSelection

08-24

rowSelection是一个用于选择表格中的行的属性或方法。它通常用于表格组件，可以通过设置不同的值来实现不同的选择方式。在CSDN开发中，rowSelection可以通过以下几种方式进行设置： 1. 单选模式：设置rowSelection为{ type: 'radio' }，这样用户只能选择一行。 2. 多选模式：设置rowSelection为{ type: 'checkbox' }，这样用户可以选择多行。 3. 自定义模式：通过设置rowSelection的自定义属性来实现特定的选择逻辑，比如限制选择的行数、根据某个字段进行筛选等。除了选择模式，rowSelection还可以包含其他属性，例如： - selectedRowKeys：一个数组，包含已选中行的key值。 - onSelect：当用户选择行时触发的回调函数。 - onSelectAll：当用户全选或取消全选时触发的回调函数。通过配置rowSelection，开发者可以方便地实现表格行的选择功能，并根据业务需求进行相应的处理。