首页 > 其他分享 >利用react-resizable实现antd表格头宽度可以拖拽调节

利用react-resizable实现antd表格头宽度可以拖拽调节

时间:2023-06-16 18:11:39浏览次数:48  
标签:index const resizable react width JSON antd col columns

1.创建ResizeAbleTable文件夹

1.1 index.js

import {Table} from "antd4"
import React, {useEffect, useState} from "react"
import {Resizable} from "react-resizable"
import "./index.less"

/**
 * 可伸缩列
 * @param props
 * @returns
 */
const ResizableTable = (props) => {
    const [columns, setcolumn] = useState([])
    useEffect(() => {
        if (props.columns) {
            setcolumn(props.columns)
        }
    }, [props.columns])
    //给每一列加onResize 用于拖拽
    const setNewColumnCell = (columns, indexarray) => {
        columns.map((col, index) => {
            let array2 = JSON.parse(JSON.stringify(indexarray))
            array2.push(index)
            col.onHeaderCell = (columns) => ({
                width: columns.width ?? 0,
                onResize: handleResize(index, array2)
            })

            if (col.children?.length) {
                setNewColumnCell(col.children, array2)
            }
        })
    }
    const handleResize = (index, indexarray) => (e, a) => {
        const {size} = a
        let nextColumns =JSON.parse(JSON.stringify(columns))
        const width = size?.width ?? 80
        setNewColumnWidth(nextColumns, indexarray, width, [])
        setcolumn(nextColumns)
    }
    const setNewColumnWidth = (columns, indexarray, width, nowIndex) => {
        let i = 0
        for (let col of columns) {
            const index = i
            i++

            const currentLevel = indexarray?.[nowIndex.length]
            if (currentLevel == index) {
                console.log("当前层级", index, indexarray)
                let array2 = JSON.parse(JSON.stringify(nowIndex))
                array2.push(index)
                if (JSON.stringify(array2) == JSON.stringify(indexarray)) {
                    col.width = width
                    break
                }
                if (col.children?.length) {
                    setNewColumnWidth(col.children, indexarray, width, array2)
                }
            }
        }
      
    }

    const newcolumn = JSON.parse(JSON.stringify(columns)) 
    setNewColumnCell(newcolumn, [])
    console.log(newcolumn, "newcolumn")
    // setlastColumn(newcolumn)

    return (
        <Table
            bordered
            components={{
                header: {
                    cell: ResizableTitle
                }
            }}
            size="small"
            scroll={{x: "100vw"}}
            columns={newcolumn}
            dataSource={props.dataSource}
        />
    )
}

export default ResizableTable

const ResizableTitle = (props) => {
    const {onResize, width, ...restProps} = props

    if (!width) {
        return <th {...restProps} />
    }
    return (
        <Resizable
            width={width}
            height={0}
            handle={
                <span
                    className="react-resizable-handle"
                    onClick={(e) => {
                        e.stopPropagation()
                    }}
                />
            }
            onResize={onResize}
            draggableOpts={{enableUserSelectHack: false}}
        >
            <th {...restProps} />
        </Resizable>
    )
}

1.2 index.less

:global {
  .react-resizable {
      position: relative;
      background-clip: padding-box;
  }

  .react-resizable-handle {
      position: absolute;
      width: 10px;
      height: 100%;
      bottom: 0;
      right: -5px;
      cursor: col-resize;
      background-image: none;
      z-index: 1;
  }
}

2.引入组件进行使用

<ResizableTable columns={ResettlementsColumn} dataSource={data} />

参考链接:

antd table 可伸缩列 react-resizable 多表头实现 - 简书 (jianshu.com)

标签:index,const,resizable,react,width,JSON,antd,col,columns
From: https://www.cnblogs.com/domin520Jian/p/17486232.html

相关文章

  • AntDB数据库荣获2023年中国信创产业拳头奖“2023年中国信创数据库卓越品牌”
    近日,由全球新经济产业第三方数据挖掘和分析机构iiMediaResearch(艾媒咨询)主办的“2023年(第2届)中国信创产业大会”在广州圆满落幕。大会现场揭晓了“2023年中国信创产业拳头奖”。AntDB数据库从众多参评产品中脱颖而出,荣获“2023年中国信创产业拳头奖”,被授予“2023年中国信创数据库......
  • React图片上传组件设计
    本文讨论React图片上传组件的正确设计思路。程序员对React图片上传组件主要有如下几点关心:界面方面:自动提供图片预览功能,能删除错传的图,传图数量限制等。编程方面:上传时机是否可以外部编程控制,如果是(1)即拍即传,则不能控制也无妨,如果是(2)批量上传,则外部需要有能力控制上传时机;每一张图......
  • 初学者的React全家桶完整实例
    概述该项目还有些功能在开发过程中,如果您有什么需求,欢迎您与我联系。我希望能够通过这个项目对React初学者,或者Babel/webpack初学者都有一定的帮助。我在此再强调一下,在我写的这些文章末尾都附加了很多参考文献,而这些参考文献的作用对我的帮助真的很大,在此表示感谢!!!!!......
  • 【React工作记录一百零五】springBoot+vue实现登录操作和JWT验证
    前言大家好我是歌谣今天继续进行前后端的一个学习目前进入的是javaweb部分今天来聊聊登录部分和JWT验证部分的书写用户登录loginControllerpackagecom.itheima.controller;importcom.itheima.pojo.Emp;importcom.itheima.pojo.Result;importcom.itheima.service.EmpSer......
  • 如何使用三个有用的工具提升你的React技能
    自2013年发布以来,React.js一直是使用最广泛的JavaScript工具之一,这要归功于其无与伦比的多功能性和效率。在其基于组件的架构和虚拟DOM实现的支持下,React.js在构建现代动态Web应用程序方面表现出色。它使开发人员能够创建可重用的UI元素,从而提高生产力。由于其广泛......
  • AntDesign自定义校验表单
    <a-rowclass="row":gutter="32"><a-col:span="16"><a-form-itemlabel="场景模板标签"name="tags"><a-......
  • React Native In Action中的demo的运行
     我用了最新的xcode和新的reactnative。Chapter6: Navigation这一章中的事例跑不起来,应该是程序用了就的版本的reactnavigation("react-navigation":"^2.0.1"),同时关于Navigation的用法也做了不小的改动,因此需要重新看相关文档改写。参考:https://reactnavigation.org/docs......
  • antd 5.0 定制主题如此酷炫,我决定开启 @ant-design/cssinjs 阅读之旅
    前言antd5.0正式发布已经有一段时间了,发布当天,一心二用的看完直播。很喜欢整个设计,有种简约快乐工作的感觉,某些功能设计初衷也给了我一些启发。antd5.0提供的主题定制挺酷炫的,加之我最近对「CSS-in-JS」很感兴趣。于是迫不及待的打开了它的源码,准备研究一番。我大部分情况下都......
  • react事件处理
     函数组件事件没有this  ......
  • react组件
       ......