ant-design的Table组件,react-resizable对表格列宽实现可拖拽处理
一、概述
由于项目需求的原因,要求对 ant-design的表格列宽进行可拖拽处理。但是,ant-design的最新版本已经没有相关的实例了(3.x版本有)。幸运的是,3.x版本的表格拖拽处理方法仍然可以使用,即集成 react-resizable 插件进行处理。
二、操作步骤
1. 安装组件
1 | yarn add react-resizable 或 npm install --save react-resizable |
2. 新建一个 ResizableTable.jsx 公共组件,作为表格列宽拖拽处理的封装文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | /* 此文件为 react表格 ant-table 对列拉伸的配置文件(不需要列拉伸的表格可以忽略) * 插件依赖:react-resizable,参考ant-design@3.x 的Table组件(因为ant-design大于3.x版本已经没有相关实例了) * 使用步骤: * 1. 引入本组件:如 import ResizableTable from '@/components/ResizableTable.jsx'; * 2. 将 <Table /> 改为 <ResizableTable />,Table配置的属性保持一致; * 3. columns 的配置数据中,每个字段都需要添加 width 的精确数字;如 [{ title: '名称', dataIndex: 'td01', width: 100 },...] * (如果不使用精确数字,而是在本文件的 onHeaderCell 中添加备用值,刚开始拖动时会突然变动列宽的现象,这当然是对交互不友好的) */ import React, { useEffect, useState } from "react" ; import { Resizable } from "react-resizable" ; import { Tooltip, Table } from 'antd' ; 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> ) } /** * ant-table 可伸缩列 * @param props * @returns */ const ResizableTable = (props) => { const [columns, setColumns] = useState([]); useEffect(() => { if (props.columns) { setColumns(props.columns) } }, [props.columns]); const handleResize = (index) => (_, { size }) => { const newColumns = [...columns]; newColumns[index] = { ...newColumns[index], width: size.width, }; setColumns(newColumns); }; const mergeColumns = columns.map((col, index) => ({ ...col, // render: (text, record, index) => { // if (col.needRender) { // return col.render(text, record, index); // } // return ( // // <Tooltip title={text} placement='topLeft'> // <div style={{ width: col.width, ...{ // whiteSpace: 'nowrap', // textOverflow: 'ellipsis', // overflow: 'hidden', // } }}>{text}</div> // // </Tooltip> // ) // }, onHeaderCell: (column) => ({ width: column.width, //?? 80, onResize: handleResize(index), }), })); return ( <div className= "resizeTable" > <Table {...props} // bordered components={{ header: { cell: ResizableTitle } }} scroll={{ x: 900 }} columns={mergeColumns} dataSource={props.dataSource} /> </div> ) } export default ResizableTable |
3. 在需要表格列宽拉伸的页面,进行处理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | ...(此处省略一些无关语句) // 引入封装组件 import ResizableTable from '@/components/ResizableTable.jsx' ;const PageCom = (props) => { ...(此处省略一些无关语句) const [tableLoading, setTableLoading] = useState( false ); //表格加载中 const [tableData, setTableData] = useState([]); const [currentPage, setCurrentPage] = useState(1); const [pageSize, setPageSize] = useState(store.getState().global.pageSize); const [total, setTotal] = useState(0); //表格栏目数据 const tableColumns = [ { title: '区域机构' , dataIndex: 'orgName' , width: 200 }, { title: '传片数' , dataIndex: 'td02' , width: 80}, { title: '正位胸片数' , dataIndex: 'td03' , width: 100 }, { title: 'AI阳性数' , dataIndex: 'td04' , width: 100 }, { title: 'AI阳性率/10万' , dataIndex: 'td05' , width: 120 }, { title: '复核数' , dataIndex: 'td06' , width: 80 }, ]; // 表格分页 const paginationData = { position: [ 'none' , 'bottomCenter' ], current: currentPage, //当前页码 pageSize, // 每页数据条数 pageSizeOptions: store.getState().global.pageSizeOptions, total, showTotal: (total, range) => ( <span>{range[0]}-{range[1]} / 共{total} 条</span> ), showSizeChanger: true , onChange: (page, pageSize)=>{ setCurrentPage(page) setPageSize(pageSize) } }; return <div className= "com-wrapper" > { /* 查询条件 */ } { /* ...... */ } { /* 表格区域 */ } <div className= "app-table-wrapper" > <div className= "table-wrapper" > { /* 原来配置 */ } { /* <Table size="small" pagination={paginationData} columns={tableColumns} dataSource={tableData} rowKey="id" loading={tableLoading} /> */ } { /* 修改为 */ | <ResizableTable size= "small" pagination={paginationData} columns={tableColumns} dataSource={tableData} rowKey= "id" loading={tableLoading} /> </div> </div> </div>; }; export default PageCom; |
4. 表格样式进行处理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .resizeTable { .react-resizable { position : relative ; background- clip : padding-box; user-select: none ; } // 防止默认出现横向滚动条 .ant-table-content>table{ min-width : calc( 100% - 5px ) !important ;} .react-resizable-handle { position : absolute ; width : 10px ; height : 100% ; bottom : 0 ; right : -5px ; cursor : col-resize; background-image : none ; z-index : 1 ; } } |
注释:此文没有对拖拽后的列宽进行保存处理,有关拖拽后的列宽保存操作,可自行灵活处理!
分类:
前端 / ant-design
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析