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

1574

<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=.

unity-复选框，单选框

09-07

本文将深入探讨Unity中的复选框和单选框，并提供实现这些功能的关键知识点。一、Unity UI系统概述 Unity的UGUI是在2014年引入的，用于替代早期的OnGui系统。UGUI基于图层和组件的概念，使得创建和管理复杂的用户...

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

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

汤迷的博客

02-26

7783

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

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

热门推荐

MYG_G

11-11

2万+

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

layui 数据表格复选框实现单选功能的例子

10-16

在介绍如何使用Layui框架实现数据表格中复选框的单选功能之前，首先需要了解Layui以及它在前端开发中的应用。Layui是一套基于jQuery的前端UI框架，它提供了丰富的组件，例如弹出层、按钮、表格、分页等，能够让开发...

纯CSS实现自定义单选框和复选框功能

12-28

1 实现效果 2 知识点讲解 ...标签在单选按钮和复选按钮上经常被使用，使用该标签后，你点击label标签内的内容，也可以选中对应的单选按钮或复选按钮。标签语法格式：关联控件的id xss=removed>

jQuery单选框复选框美化代码

06-24

在网页设计中，表单元素如单选框（Radio）和复选框（Checkbox）是不可或缺的部分，它们用于收集用户的选择信息。然而，浏览器默认的样式通常比较单一，不符合现代网页设计美观的需求。jQuery单选框复选框美化代码...

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

Dark_programmer的博客

05-08

2431

row-selection的使用

element 表格toggleRowSelection 回显勾选及选中数量问题

Z.Y.的博客

05-12

3947

el-table中加入row-key，type="selection"中加入:reserve-selection=“true”，reserve-selection为 true 则会在数据更新之后保留之前选中的数据。应该默认勾选一条数据，之后手动勾选了一条数据，@selection-change方法控制台打印出来是两条数据，但是界面上没有回显成功。原因是 data数据是我之前选中的行数据，数据没有改变。fileList是表格的所有数据，按下面这种写法就可以解决。这样就可以直接用data数据。

el-table 多选框变单选，选中某一行，前面的选择框自动选中

Jw_1201的博客

10-20

2512

属性即可实现单选，整条数据高亮显示，由于我用了一个多选框在前面写了事件。只需要配置 highlight-current-row。最后隐藏表头的选择框。

Ant表格a-table如何自定义多选数据 /自定义rowSelection中selectedRowKeys的参数数据/a-table如何单选多选/跨页多选数据

weixin_45271385的博客

09-10

8010

:rowSelection="{ selectedRowKeys: selectedRowKeys, //选中的数据数组 onChange: onSelectChange,//选中，取消选中触发，参数为选中数据数组 type:isRadio ? 'radio' : 'checkbox'}"//修改单选多选方式如何改变onChange参数数组里的数据更改rowKey 这样你选中后的数据就在selectedRowKeys数组里了 item就是该行数据，也可(item,index)获取下标 //..

el-table嵌套,实现父子选择框勾选联动(toggleRowSelection),并实现全选,单选,数据回显

weixin_44780971的博客

04-10

9843

效果图如下:声明:代码参考与两位博主:1.2.在本文章中,我会讲一点代码的逻辑,仅供参考,因为代码是活的,人是死的(如果人是活的,代码怎么可能是死的呢)话不多说我们开始!

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

厚积薄发.

07-25

2199

【代码】隐藏antd Table的选择框单选和复选以及点击当前行选中。

antd vue 表格rowSelection选择框功能的使用

Mr-yang的随笔

11-22

1万+

html部分： <a-table :columns="columns" :data-source="showList" :row-selection="rowSelection" :rowKey="record=>record.id" /> 功能部分： computed: { rowSelection () { return { selectedRowKeys: this.da

elementui table 表格复选框实现单选效果

qq_37309987的博客

12-07

937

【代码】elementui table 表格复选框实现单选效果。

jquery 实现复选框单选

05-24

jQuery 实现复选框单选可以通过以下步骤实现： 1. 选中所有的复选框元素，并给它们添加一个 change 事件监听器。 2. 在事件处理程序中，遍历所有的复选框元素，如果某个复选框被选中，则将其他复选框的选中状态设置为未选中状态。下面是一个实现复选框单选的示例代码： ```html  <input type="checkbox" name="color" value="red">红色 <input type="checkbox" name="color" value="green">绿色 <input type="checkbox" name="color" value="blue">蓝色 ``` ```javascript // JavaScript + jQuery部分 $(document).ready(function(){ $('input[name="color"]').change(function(){ $('input[name="color"]').not(this).prop('checked', false); }); }); ``` 在上述代码中，我们通过选择器选中了所有 name 属性为 "color" 的复选框元素，并使用 change 事件监听器来监听它们的状态变化。在事件处理程序中，我们使用 not() 方法来排除当前被选中的复选框元素，并使用 prop() 方法将其他复选框元素的选中状态设置为未选中状态。这样就实现了复选框单选的功能。