antd table组件 勾选行 实现 单选可取消,多选双击后只选中当前行的效果

字节浮尘
• 阅读 1826

亲爱的产品经理和boss,一直想要这样的一个效果
表格中勾选行 实现 单选可取消,多选双击后只选中当前行的效果
基于项目中使用的antd table组件,听取了leader给出的方案建议,算是实现了该功能
最关键的是利用table组件中rowSelcton的rederCell属性
antd table组件 勾选行 实现 单选可取消,多选双击后只选中当前行的效果
核心实现方案:利用renderCell在该位置渲染一个CheckBox,而该CheckBox可拿到当前的record的信息,可利用表格的rowKey去维护一份selectedKeys数组

1、CheckBox的变化会更新该selectedKeys数组,而CheckBox的选中与否的渲染也由该数组是否还有该行record的key来判定。

2、在CheckBox外层包裹一层div,div上绑定双击事件的监听,div也可以拿到该行record信息,响应事件去修改全局维护的selectedKeys数组来实现双击只选中当前行的效果

3、单选也利用CheckBox实现,不利用表格自身的单选功能

关键代码实现如下:

PS:项目中利用了全局的状态管理来维护选中项的keys,命名为selectedValues,可根据自身情况更改

table组件中rowSelection的配置:

rowSelection={{
            selectedRowKeys: selectedValues, // PS:逻辑上来讲,这一行也不需要了,不过没有经过删除掉的测试,留着也没啥大问题
            fixed: true,
            hideSelectAll: true,
            preserveSelectedRowKeys: true,
           
            renderCell(value, record, index, originNode) {
              return (
                <div onDoubleClick={() => handleCheckBoxDoubleClick(record.key)}>
                  <Checkbox
                    checked={(selectedValues || []).includes(record.key)}
                    onChange={(e) => handleCheckBoxChange(e, record.key)}
                  ></Checkbox>
                </div>
              );
            },
          }}

CheckBox的选中变化的响应:

const handleCheckBoxChange = (e: CheckboxChangeEvent, recordKey: string) => {
    let newSelectedValues: string[] = selectedValues || [];
    // 多选模式
   
    if (slicerSetting?.selectType === 'more') {  //项目中判定用户选择的多选模式或单选模式的setting,根据自身使用更改
      if (e.target.checked) {
        newSelectedValues = [...newSelectedValues, recordKey];
        // newSelectedValues.push(recordKey);
      } else {
        newSelectedValues = newSelectedValues.filter((item) => item !== recordKey);
      }
    }
    // 单选模式
    else {
      newSelectedValues = e.target.checked ? [recordKey] : [];
    }
    //更新全局的选中项keys的数组
    dispatch(setSlicerSelectedValues({ selectedValues: newSelectedValues as string[], chartId: chartId }));
  };

多选模式下双击CheckBox的响应:

  const handleCheckBoxDoubleClick = (recordKey: string) => {
    // 多选模式
    if (slicerSetting?.selectType === 'more') {  //项目中判定用户选择的多选模式或单选模式的setting,根据自身使用更改
      //更新全局的选中项keys的数组
      dispatch(setSlicerSelectedValues({ selectedValues: [recordKey], chartId: chartId }));
    }
  };
点赞
收藏
评论区
推荐文章
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Alex799 Alex799
4年前
Vue进阶(幺柒幺):前端用户体验提升(五)Flex实现弹性布局
需求背景在实现组件拖拽设计过程中,发现组件样式中设置了display:flex属性信息,导致组件生成后无法实现拖拽效果,网上查阅资料后发现Flex布局大有天地。Flex来源
vue 日历组件
遇到一个需求,不用任何第三方库,只基于vue2实现一个日历组件,末尾附上我的代码,单文件,不要找文件长度的茬。下面是需求样式是类似于window10日历支持控制周一还是周日在第一列支持鼠标滑动切换支持单选,拖动鼠标多选,
浩浩 浩浩
4年前
【Flutter实战】单选框和复选框
3.6单选开关和复选框Material组件库中提供了Material风格的单选开关Switch和复选框Checkbox,虽然它们都是继承自StatefulWidget,但它们本身不会保存当前选中状态,选中状态都是由父组件来管理的。当Switch或Checkbox被点击时,会触发它们的onChanged回调,我们可以在此回调中处
Stella981 Stella981
3年前
Cocos Creator 如何制作拼图游戏,支持无规则形状!
预览效果!(https://oscimg.oschina.net/oscnet/c075e00adf85d09d261e7006e2eeeef3065.gif)  实现思路  假设一张图,按照row行col列分成count(row\col) 份,由count份碎片组成,每个碎片有自己特定的
Stella981 Stella981
3年前
Nginx + lua +[memcached,redis]
精品案例1、Nginxluamemcached,redis实现网站灰度发布2、分库分表/基于Leaf组件实现的全球唯一ID(非UUID)3、Redis独立数据监控,实现订单超时操作/MQ死信操作SelectPollEpollReactor模型4、分布式任务调试Quartz应用
Stella981 Stella981
3年前
ListActivity中CheckBox的勾选事件处理
这个小例子包含:ListActivity中CheckBox的勾选事件处理,List中Item的单击和长按事件处理,以及在list下方显示一个不随List滚动的Button!(http://static.oschina.net/uploads/space/2013/0125/234312_5jr9_189801.png)当ListActivity中
Wesley13 Wesley13
3年前
UI组件
需求:Elementui的Table组件自带合计行,但是需求需要在合计行的某些单元格有特别的样式以及事件,没有研究出怎么在既有合计行上完成此需求,于是利用其原本的一些属性完成自定义合计行.分析:在Table组件中是有columns(包含所有列的数据的数组)的,但是只有在summarymethod事件中才暴露出来,用来自定
Vitess全局唯一ID生成的实现方案 | 京东云技术团队
为了标识一段数据,通常我们会为其指定一个唯一id,比如利用MySQL数据库中的自增主键。但是当数据量非常大时,仅靠数据库的自增主键是远远不够的,并且对于分布式数据库只依赖MySQL的自增id无法满足全局唯一的需求。因此,产生了多种解决方案,如UUID,Sn
达里尔 达里尔
1年前
layui复选框取消父级子级的关联
layui项目中需要个需求,layui树形结构组件tree,复选框选中的时候不能影响子级和父级,现在是复选框选中的时候父级多选会被选中,子级也会被选中有个参数,tree.js源码里有一个参数可以解决,但是现在layui的文档里没有渲染树形结构的时候加个参数