首页 > 其他分享 >antd 的ProTable 的列加上ellipsis属性后,react-resizable会无法拖动列

antd 的ProTable 的列加上ellipsis属性后,react-resizable会无法拖动列

时间:2024-04-16 09:45:15浏览次数:26  
标签:resizable 拖动 react ProTable 组件 ellipsis 属性

1、我尝试在列中加入ellipsis为true后,让内容超出后,用省略号表示。

 {title:displayName,dataIndex:propName,key:newPropName,width:widthIndex
        //,ellipsis:true
      }

 

但是这引发了另外的问题。react-resizable 配置的列可拖动无效了。

额外的情况:obj.fixed = 'left'   让列固定,这是可以出现省略号和可以拖动的。

 

2、chartGpt给出的解决办法:

ellipsis 属性通常用于在内容溢出时显示省略号。但是,它可能会与某些 UI 库或组件产生冲突,因为它会影响到元素的布局和大小计算。

在你描述的情况下,使用 ellipsis 属性可能导致 react-resizable 无法正确地识别和操作表格列的大小,因为它可能会影响到列的宽度计算。

为了解决这个问题,你可以考虑以下几种方法:

  1. 不使用 ellipsis 属性: 如果可能的话,尝试不使用 ellipsis 属性,或者通过其他方式处理文本溢出,例如使用 Tooltip 或者自定义样式来处理长文本的显示。

  2. 自定义处理: 如果你确实需要 ellipsis 属性,那么你可能需要自定义处理 react-resizable 的拖动逻辑。这可能涉及到修改 react-resizable 的源代码,或者在使用时进行一些 hack 或调整以兼容 ellipsis 属性。

  3. 反馈给组件作者: 如果 ellipsis 属性与 react-resizable 组件的正常功能产生了冲突,你可以将这个问题反馈给组件的作者,看是否可以在未来的版本中解决这个问题。

综上所述,你可以根据具体情况选择合适的解决方案来解决 ellipsis 属性与 react-resizable 组件之间的冲突。

 

标签:resizable,拖动,react,ProTable,组件,ellipsis,属性
From: https://www.cnblogs.com/wwssgg/p/18137443

相关文章

  • react native调试相关技巧
    ReactNative的Debug基础:https://reactnative.dev/docs/next/debugging   调出开发菜单DevMenu。cmd+D或Device->Shake   在DevMenu上可以选择“ShowElementInspector”,显示UI上的组件,但是这是直接在app上显示,不清楚,最好在DevTools上来查看元素。 ......
  • 如何使用React.js从头开始构建TODO应用
    如果你是React.js的新手,并且渴望投身应用程序开发,那么你来对地方了!跟着我一起通过这个教程,从头开始构建一个基本的TODO应用程序。(本文视频讲解:java567.com)TODO应用对初学者的重要性TODO应用作为初学者掌握新编程语言或框架基础知识的理想项目。它为学习基本概念提供了实际的上......
  • [转]写给前端的 react-native 入门指南
    前言本文主要介绍react-native(下称RN)的入门,和前端的异同点文章不涉及功能的具体实现选择优势我们先说说,为什么很多人会选择使用RN、他对应的特性和普通Web的区别前端资源,生态的互通因为使用的语言是JS和react,对于前端来说可以无缝切换,并且他还能......
  • Reactor 和 Proactor
    在socket编程中,Reactor和Proactor是两种常见的事件处理模式,它们用于处理异步I/O操作,但它们的工作方式略有不同。1.Reactor模式:-Reactor模式是一种基于事件驱动的设计模式,它通过一个事件循环来处理输入事件并分发给对应的事件处理器。-在Reactor模式中,有一个......
  • React.js 网站开发:实现滚动加载动画
    React.js网站开发:实现滚动加载动画极客前端探索者前沿技术的探索者,编码艺术的实践者 最近在开发官网的过程中,涉及到UI动画的制作,其中滚动效果的使用比较频繁,特此整理一下,以便查询和温习。平滑向上过渡动画这种往下滚动过渡渐变显示的动画是最常......
  • React笔记(一)
    基础型exportdefaultfunctionProfile(){return(<imgsrc="https://i.imgur.com/MK3eW3Am.jpg"alt="KatherineJohnson"/>)}默认 exportdefaultfunctionButton(){} importButtonfrom'./Button.js�......
  • React状态与引用(Refs)- 差异和使用场景
    在本文中,我们将深入比较React的state和refs,探讨它们在特定场景下的适用性。当需要在React应用程序中存储数据时,首先要考虑的问题是:“数据是否在组件的生命周期内的某个时刻发生变化?”如果不会,那么普通的const变量非常适合。然而,如果数据会发生变化,那么就需要使用useState和useR......
  • tailwindcss/React 性能优化
    tailwindcssvscode空格才出提示https://v2ex.com/t/1027326#reply4"editor.quickSuggestions":{"strings":true}React性能优化实用技巧在开发React应用时,性能优化是一个永恒的话题。本文将分享几个实用的工具和技巧,帮助你提升React应用的性能。ReactDeveloperToo......
  • react native layout
    官方文档:https://reactnative.dev/docs/flexbox/#absolute--relative-layout另外一片文档:https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c需要注意的是position的relative的含义:它是先计算没有设定position的时候的位置,然后基于这个......
  • React常见的面试题
    1、什么是React?React是一个用于构建用户界面的javascript库。用户界面由按钮、文本和图像等小单元内容构建而成的。2、React的特点是什么?(1)、组件化(2)、虚拟dom(3)、单向数据流(4)、JSX语法(5)、高效性能(6)、生态系统丰富3、什么是JSX?JSX是一种JavaScript的语法扩展,它允许在JavaS......