首页 > 其他分享 >react antd table react-sortable-hoc DraggableBodyRow 拖拽及禁用指定行拖拽

react antd table react-sortable-hoc DraggableBodyRow 拖拽及禁用指定行拖拽

时间:2023-12-07 20:13:11浏览次数:40  
标签:index DraggableBodyRow react antd table 拖拽

原文地址:基于antd树形表格table的拖拽排序效果实现 - 掘金 (juejin.cn)

思路片段:

const DraggableBodyRow: React.FC<any> = ({ className, style, ...restProps }) => {
    const index = customInfoList.findIndex(
      ({ order: _index }) => _index === restProps['data-row-key'],
    );
    // 头两行禁用
    if ([0, 1].includes(index)) {
      return (
        <tr
          className={className}
          // style={isDrag ? { cursor: 'move', opacity, ...style } : { ...style }}
          // data-handler-id={handlerId}
          {...restProps}
        />
      );
    }

    return <SortableItem index={index} className={className} {...restProps} />;
  };

 

标签:index,DraggableBodyRow,react,antd,table,拖拽
From: https://www.cnblogs.com/sangzs/p/17883837.html

相关文章

  • React 中虚拟DOM是什么,为什么需要它?
    注意:本节主要讲React中的虚拟DOM,但是虚拟DOM并不是React中特有的内容。1.React中虚拟DOM是什么?虚拟DOM是对真实DOM的描述,虚拟DOM是JS对象,实际上就是JSX通过babel转换成React.createElement(),然后这个函数执行后变成的JS对象。关于JSX的介绍可以参考我的这篇文章JSX......
  • 2023最新高级难度react面试题,包含答案。刷题必备!记录一下。
    好记性不如烂笔头内容来自面试宝典-高级难度react面试题合集问:如何实现React中的组件缓存策略?在React中,我们可以使用多种策略来实现组件的缓存,包括但不限于以下几种方法:使用React.memo()React.memo()是一个高阶函数,它可以接收一个组件作为参数,并返回一个新的组件。......
  • 2023最新初级难度react面试题,包含答案。刷题必备!记录一下。
    好记性不如烂笔头内容来自面试宝典-初级难度react面试题合集问:请详述React.js是什么?React.js是一个由Facebook开发的开源JavaScript库,用于构建用户界面(UserInterface,UI)。它是目前Web开发领域最流行和广泛使用的库之一。React.js主要提供了一个虚拟DOM(Virtua......
  • 2023最新中级难度react面试题,包含答案。刷题必备!记录一下。
    好记性不如烂笔头内容来自面试宝典-中级难度react面试题合集问:请详述React中的HOC(高阶组件)的概念和应用场景?在React中,高阶组件(HighOrderComponent,简称HOC)是一种设计模式,它允许我们将共享的功能提取出来,形成一个新的可复用组件。HOC本质上就是一个接收组件作为参......
  • React 组件通信方式
    人生的游戏不在于拿了一副好牌,而在于怎样去打好坏牌,世上没有常胜将军,勇于超越自我者才能得到最后的奖杯。1.父子组件通信方式1.1父组件传递到子组件直接通过属性进行传递,数据的传递可以提高组件的复用性。1.2子组件传递到父组件通过回调函数(callback)来实现。ref标......
  • dom断点可定位react组件值修改
    react组件的值修改,也可以使用dom断点来定位。之前一直误区,认为react组件的修改,不能用dom断点来拦截,实际上在涉及到修改具体原生组件属性的时候,也可定位。例如:react组件内部使用了input组件,react组件值变化导致input的value发生改变,使用dom断点就可定位。由于input组件的属性修......
  • 解决谷歌浏览器 Google Chrome不能拖拽安装离线插件的办法
    我使用的谷歌浏览器版本是119.0.6045.160(正式版本)(64位)  之前多台电脑都可以通过拖拽安装crx格式的扩展程序,最近公司配好了新的笔记本,但今天下载好crx文件发现拖动之后并不可以安装,并且已经打开了开发者模式,还是会显示禁用的小图标。解决方式首先打开下面地址:chrome://fla......
  • WPF 最大化,最小化,关闭,拖拽,双击事件
    十年河东,十年河西,莫欺少年穷学无止境,精益求精代码如下publicMainView(){InitializeComponent();//最小化btnMin.Click+=(s,e)=>{this.WindowState=WindowState.Minimized;};//最大化b......
  • React 组件懒加载
    只有不断学习和成长,才能适应这个快速变化的世界。1.懒加载1.1React懒加载React中懒加载Lazy与Suspense需要搭配使用。React.lazy定义:React.1azy函数能让你像渲染常规组件一样处理动态引入的组件。其实就是懒加载。为什么代码要分割?当你的程序越来越大,代码量越......
  • React:实现一个定时器计数器,每秒自动+1
    需求:实现一个定时器计数器,每秒自动+1importReact,{useState,useEffect}from"react";exportdefaultfunctionApp(){let[count,setCount]=useState(0);useEffect(()=>{lettimer=setInterval(()=>{setCount(count+1);},100......