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;
    }
}

  

注释:此文没有对拖拽后的列宽进行保存处理,有关拖拽后的列宽保存操作,可自行灵活处理!

 

 

posted @   一只两支三指  阅读(2964)  评论(0编辑  收藏  举报
(评论功能已被禁用)
相关博文:
阅读排行:
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析
点击右上角即可分享
微信分享提示