自定义antd table/proTable列宽拖动组件，区别于react插件

已于 2024-07-24 14:18:06 修改
阅读量120 收藏
点赞数 1
文章标签： react.js 前端 前端框架
于 2024-07-24 14:14:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69955217/article/details/140661789
版权

        没有使用github上的插件，自己定义了一个列宽拖动组件，并且实现了缓存等功能，
目前网上的基于antd pro的表格列宽拖动插件，使用起来很不方便，，他是实时改变表格列宽的，        
        所以在性能上，拖动速度上，都极容易出现问题，
索性自己基于component API，自定义实现了一个，

我详细的罗列了具体的步骤，代码可以直接复制去用，封装好了的组件，记得别忘记less文件，
然后表格的每一个列需要有初始宽度，链接在下面，也是我自己的文章，


懒得发第二遍了，直接上链接：
https://juejin.cn/post/7394266583181295643

Shmily°500
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
封装ProTable组件
weixin_55652851的博客
07-13 736
封装ProTable组件
react-react自定义搜索组件主要针对于reactantd表头搜索基于antd进行封装
08-14
针对于 react antd 表格组件中表头搜索，原则上支持所有 antd 及自定义 form 组件，如组件值与触发方法不是 value 及 onChange 则需要设置 valuePropName, validateTrigger
antd实现Table拖拽调整列宽
weixin_46600931的博客
01-30 4906
table表单列宽拖拽在最新的antd 版本中已经没有demo了，需要去过完版本去找3.26.19。注意：在实现拖曳功能的前提是。
ant design pro react 中proTable相关设置
weixin_39061000的博客
08-19 776
去掉搜索 去掉表头工具部分配置 修改pageSize大小
Antd Table组件拖动调整列宽的一种实现
草率小猿的博客
03-28 7145
借助于React-Resizable，实现Antd Table组件拖动调整列宽效果
【antd组件之ProTable，EditableProTable】
小蓝人的博客
01-16 6875
【代码】【antd组件之ProTable，EditableProTable】
Ant-Design-Pro-Components： ProTable组件 实现跨页多选。
~~~
04-26 1740
Ant-Design-Pro-Components： ProTable组件 实现跨页多选。
Ant-Design-Pro-Components：ProTable组件后台请求数据，表格实现跨页多选,修改行信息，批量提交修改。
~~~
05-25 1086
Ant-Design-Pro-Components：ProTable组件后台请求数据，表格实现跨页多选,修改行信息，批量提交修改。
vue-ele-protable一个类似 antd pro中protable的强大组件
still_relive的博客
07-10 1508
vue-ele-protable一个类似 antd pro中protable的强大组件。
基于arco-design组件库vue3 ProTable、TableList组件
change_anna的博客
06-14 5669
arco-design vue3+ts pro-table
react-react中后台管理系统开发模板antdpro
08-14
react中后台管理系统开发模板-antd-pro
antd-table-react.zip
07-13
antd-table 是一个基于 React 的组件库，用于构建高质量的数据展示表格。这个压缩包 "antd-table-react.zip" 提供了一个示例，演示了如何在 antd 表格中实现首行和首列固定的效果，这对于数据量较大且需要横向和纵向...
antd vue table跨行合并单元格,并且自定义内容实例
01-18
ant-design-vue版本：~1.3.8 需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { ... varTable: { cloumns: [ { title: '置信度', dataIndex:
pro-table:Ant像Pro一样使用Ant Design Table！
05-28
此变更不影响继续使用 @ant-design/pro-table 这个 npm 包名安装使用此组件。@ant-design/pro-table:trophy: Use Ant Design Table like a Pro!DemoAPIpro-table 在 antd 的 table 上进行了一层封装，支持了一些预设...
ant design的table组件实现全选功能以及自定义分页
01-18
ant design的table组件实现全选功能以及自定义分页 直接附上全部代码以及截图了 import './index.scss'; import React from 'react'; import {Checkbox, Table, Popconfirm} from 'antd'; class TestComponent ...
沉淀自己的pro-table组件，并发布到npm（Vue3、element-plus）
hans774882968的博客
07-18 1848
传送门 约定：npm包名vue3-el-pro-table，引用vue3-el-pro-table的包名为“本项目”。 声明：Vue3ProTable.vue代码是在这个项目的基础上进行修改的。 Quick Start yarn add vue3-el-pro-table src/main.ts Then use directly in .vue file. Import interface: import { Vue3ProTableProps } from 'vue
antdesign vue中table表头列的拖拽和列宽的拖拽
最新发布
weixin_48447589的博客
04-09 1816
写项目时遇到一个需求就是表头是可以拖动换位置的，并且需要用户手动拖拽设置宽度，我的项目用的是vue+antdesign vue实现的。这样就可以实现整列的位置拖拽了，你要是想这两个需求同时实现的话，就把他下载一起就可以了，引入import Sortable from 'sortablejs';实现一整列的位置拖拽就得依靠插件来实现了。先下载sortablejs。
antd Table 拖拽 调整列宽
weixin_45682449的博客
03-10 1505
antd Table column拖拽 调整列宽
table固定宽度与自动宽度
weixin_30920091的博客
07-16 879
table-layout:auto(创建的table默认是此布局模式)： 对table和td、th指定的宽度无效，浏览器会计算所有单元格的内容宽度才能得出一列宽度 如果想对单元格的内容自动折行需使用word-wrap:break-word;word-break:break-all; Table-layout:fixed 如果只对table指定宽度，则各单元格的宽度...
antd table动态表头_React项目使用ant Table组件动态生成columns
05-26
要实现动态生成Table组件的columns，可以使用React的状态管理来实现。具体步骤如下： 1. 定义一个state来保存columns数组。初始值可以为一个空数组。 ```javascript const [columns, setColumns] = useState([]); ``` 2. 在组件加载时，从数据源获取表头数据，并根据数据动态生成columns数组，然后将其保存到state中。 ```javascript useEffect(() => { // 获取表头数据 const headers = fetchDataFromAPI(); // 根据表头数据动态生成columns数组 const newColumns = headers.map((header) => ({ title: header.name, dataIndex: header.field, })); // 保存columns数组到state中 setColumns(newColumns); }, []); ``` 3. 在Table组件中使用动态生成的columns数组。 ```javascript <Table dataSource={data} columns={columns} /> ``` 完整代码如下： ```javascript import React, { useState, useEffect } from 'react'; import { Table } from 'antd'; function DynamicTable() { const [columns, setColumns] = useState([]); useEffect(() => { // 获取表头数据 const headers = fetchDataFromAPI(); // 根据表头数据动态生成columns数组 const newColumns = headers.map((header) => ({ title: header.name, dataIndex: header.field, })); // 保存columns数组到state中 setColumns(newColumns); }, []); const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', }, ]; return <Table dataSource={data} columns={columns} />; } export default DynamicTable; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值