antd table表头拖拽实现(二)

简介: antd table表头拖拽实现

三、效果


703665026d0f653dff8b1a7b1da4e849_82fd3e96fbc2438da259bcccdb98cd82.gif


拆分组件


直接拿代码


components/ResizableTableModel/index.jsx


// components/ResizableTableModel/index.jsx
// 可拖拽表格组件
import { useState } from 'react';
import { Table } from 'antd';
import { Resizable } from 'react-resizable';
import './index.css';
// 表头拖拽组件
const ResizableTitle = ({ onResize, width, ...restProps }) => {
    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} style={{ ...restProps?.style, userSelect: 'none' }} />
        </Resizable>
    );
};
// 带拖拽表格组件
const ResizableTable = ({ columns = [], ...props }) => {
    // * 列数据
    const [cols, setCols] = useState(columns);
    const colsArray = cols.map((col, index) => {
        return {
            ...col,
            onHeaderCell: column => ({ width: column.width, onResize: handleResize(index) })
        };
    });
    // todo 调整列宽
    const handleResize = index => {
        return (_, { size }) => {
            const temp = [...cols];
            temp[index] = { ...temp[index], width: size.width };
            setCols(temp);
        };
    };
    return (
        <Table
            components={{ header: { cell: ResizableTitle } }}
            columns={colsArray}
            {...props}
        />
    );
};
export default ResizableTable;


components/ResizableTableModel/index.css


// components/ResizableTableModel/index.css
.react-resizable-handle {
    position: absolute;
    right: -5px;
    bottom: 0;
    z-index: 1;
    width: 10px;
    height: 100%;
    cursor: col-resize;
}


pages/home/index.jsx


// pages/home/index.jsx
import React from 'react'
import { Divider, Table } from 'antd'
import ResizeableTableModel from '@/components/ResizeableTableModel'
const dataSource = [
    { _id: 1, label: '范德萨1', gender: '男' },
    { _id: 2, label: '范德萨2', gender: '女' },
    { _id: 3, label: '范德萨3', gender: '男' },
    { _id: 4, label: '范德萨4', gender: '男' },
    { _id: 5, label: '范德萨5', gender: '女' },
]
const columns = [
    {
        title: '#',
        dataIndex: '_id',
        width: 60,
        ellipsis: true,
    },
    {
        title: '名称',
        dataIndex: 'label',
        width: 200,
        ellipsis: true,
    },
    {
        title: '性别',
        dataIndex: 'gender',
        width: 200,
        ellipsis: true,
    },
    {
        title: '操作',
        key: 'action',
        width: 200,
        ellipsis: true,
        render: () => (
            <a>修改</a>
        ),
    },
];
const Layout = () => {
    return (
        <>
             <Divider children="组件表格" />
             <ResizeableTableModel
                  rowKey={'_id'}
                  columns={columns}
                  dataSource={dataSource}
              />
        </>
    )
}
export default Layout


总结


要注意以下两点:


1、初始列的宽度设置

2、拖拽回调的判断赋值


制作不易,看完给小编点个赞吧!


目录
打赏
0
0
1
0
3
分享
相关文章
深入掌握ant-design的form异步校验(一)
本文适合对ant-design的表单校验感兴趣的小伙伴阅读~
前端故障演练的探索与实践 | D2分享视频+文章
这些年来,随着前端技术的演进,特别是serverless、跨端、端计算等新技术的引入,前端架构的复杂程度成爆炸式增长。我们尝试通过前端故障演练来提升前端安全生产的水位。
前端故障演练的探索与实践 | D2分享视频+文章
vue拖拽 —— vuedraggable 表格拖拽行
vue拖拽 —— vuedraggable 表格拖拽行
482 1
Element UI表格拖拽(vue中) —— 行拖拽、列拖拽
Element UI表格拖拽(vue中) —— 行拖拽、列拖拽
1474 0
我是如何做到springboot自动配置原理解析
我是如何做到springboot自动配置原理解析
Vue 路由切换时页面刷新页面重新渲染
在Vue中,路由切换并不自动重新渲染页面,这可能导致传递参数到子组件时出现问题。使用`this.$route.replace(&#39;地址&#39;)`或`this.$route.push({name:&#39;地址&#39;,params:{key:value}})`进行跳转,但子组件不会响应变化。为解决此问题,需监听`$route`对象的变化,如图所示,通过`watch: {$route}`确保页面更新。
624 5
Apose.word控件获取书签中的内容并复制到一个新的word文档中
Apose.word控件获取书签中的内容并复制到一个新的word文档中
532 0
Apose.word控件获取书签中的内容并复制到一个新的word文档中
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问