ali-react-table树形选择根据checkStrictly显示不同的选择框

需求背景

用户可以通过Switch开关组件切换ali-react-table的树形选择框是否级联
在这里插入图片描述

现状

ali-react-table的树形选择没有区分选择框的样式,即无论checkStrictly值为true还是false,选择框一直都为CheckBox,产品希望当父节点和子节点独立管理时,选择框能变成Radio组件

解决方案

看了源码,树形选择被写死用的是CheckBox组件,未提供参数对其进行替换,于是第一个方案便是在column自定义一列显示Radio,但由于是树形结构,展开按钮会在Radio左边,产品不接受这种设计
在这里插入图片描述
那么只能去修改ali-react-table的源码了,由于直接用Radio组件的话当用户重复点击选择框时不会取消选中,于是乎回到了一个老问题,如何将CheckBox组件变成Radio组件?
很简单,我使用的是antd,只需要给CheckBox加个属性 prefixCls=‘ant-radio’
具体源码修改如下

    const makeCheckbox = (key: string, root: boolean, row?: any) => {
      return (
        opts.checkStrictly?
        <Checkbox
          prefixCls='ant-radio'  
          checked={treeDataHelper.isChecked(key)} 
          disabled={!root && isDisabled(row)}
          style={isHidden(row)?{display:"none"}:{}}
          onChange={clickArea === 'checkbox' || root ? () => onToggleKey(key) : undefined}
        /> :
        <Checkbox
          checked={treeDataHelper.isChecked(key)}
          indeterminate={treeDataHelper.isIndeterminate(key)}
          disabled={!root && isDisabled(row)}
          style={isHidden(row)?{display:"none"}:{}}
          onChange={clickArea === 'checkbox' || root ? () => onToggleKey(key) : undefined}
        />
      )
    }
  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值