Vue3+ant-design-vue2实现table列拖拽效果不够丝滑BUG

最新推荐文章于 2024-08-20 15:10:12 发布
最新推荐文章于 2024-08-20 15:10:12 发布
阅读量940 收藏 2
点赞数
分类专栏： 前端BUG 文章标签： 前端框架 html5 vue.js Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42768880/article/details/129735139
版权
在JeecgBoot项目中，使用ant-design-vue2的BasicTable并结合vue3-draggable-resizable实现列拖拽功能，遇到拖动时列宽度不改变及延迟问题。通过引入节流函数useThrottleFn，优化拖拽效果，消除卡顿，提高拖动体验。
摘要由CSDN通过智能技术生成

背景

公司项目中使用jeecgboot+ant-design-vue2的BasicTable表格没有列拖拽的属性，直接引入vue3-draggable-resizable后，发现表格鼠标效果出现，但是拖动时表格列宽度没有改变

第一步

首先在项目中安装引入vue3-draggable-resizable插件，我是参考的以下链接引入的

参考引入方式

第二步

在useColumns中返回columnsRef参考以下链接设置columns

最低0.47元/天 解锁文章
antdesign vue组件问题（二）table 组件错位问题，滚动加载，行选中问题，树表格自定义节点图标
子非渔
02-27 6492
table 组件错位导致问题出现的原因很多； 1. 内容区超过td范围， ant 组件并不像ele 提供了 tool-tip展示， 解决办法：在每个单元格外包一层div 设置宽度 css 样式 处理成 文本溢出 省略号 代替显示 当然你回发现这样处理过后文本是不会超出了，但是错位问题还是没有解决。 2. index 列 和 check 列同时出现 会存在错位。 index 列 ant 是不支持 ...
使用vue3+ant-design-vue+vite+ts开发的通用后台框架.zip
01-04
使用vue3+ant-design-vue+vite+ts开发的通用后台框架，实现了权限系统、动态菜单、表格集成快速使用等功能，简洁干净开箱即用。 Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 ...
antd table组件中列宽拖拽resizable未生效解决办法
m0_69439101的博客
08-07 2883
2. 之后，columns使用ref声明，我就是因为没有用ref声明导致的，并且需要有width，minWidth，maxWidth，resizable 几个参数。1. 首先，table组件中需要绑定一个方法@resizeColumn="handleResizeColumn"。3. table中绑定的方法@resizeColumn="handleResizeColumn"
and design vue表格列宽度拖拽，vue-draggable-resizable插件使用
最新发布
m0_46978096的博客
08-20 379
【代码】and design vue表格列宽度拖拽，vue-draggable-resizable插件使用。
ant-design-vue table表头拖拽功能 踩坑
czx3387170的博客
03-14 3673
用官方的DEMO也可以，但是有几点必须要注意，否则拖拽不成功， 1、vue-draggable-resizable的版本必须是2.1.0，其他版本有冲突。 npm installvue-draggable-resizable@2.1.0 2、必须在table-draggable-handle样式中加入：transform:none; position:absolute 否则不起效果 ant-design-vue版本是1.7.2 vue版本是2.6.11 import Vue from 'v...
使用ant design vue中a-table实现自定义列拖拽 以及解决列拖拽时表格大小跟着变化的问题
defined_的博客
06-01 2670
@resizeColumn="handleResizeColumn" 设置列拖拽方法 handleResizeColumn是拖拽时调用的函数 当isHidden为true时 为div加上table_hidden的样式 即超出部分隐藏 这样拖拽时跟着移动的表格部分就会被隐藏了
vue2实现el-table表格拖拽
qq_52377225的博客
12-28 1043
row-key 就是tabelData数组每一列的id。
使用vue3+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统.zip
01-22
Vue 3.2 -- 使用vue3+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统、动态菜单、国际化、mock数据、表格集成快速使用等功能，简洁干净开箱即用。. 各领域数据集，工具源码，适合毕业设计、课程设计...
基于 vue3 + ant-design-vue 的中后台管理系统.zip
05-26
Vue3 是 Vue.js 的最新版本，提供了许多性能优化和新特性，而 Ant Design Vue 是一套基于 Vue2 和 Ant Design 设计规范的组件库，但在 Vue3 的支持下，它能够帮助开发者快速构建美观的用户界面。 **Vue3 知识点：**...
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
11-07
在本项目中，我们探索了如何使用最新技术栈进行全栈开发，重点是前端的Vite3、Vue3、TypeScript以及Ant Design Vue3的整合，同时涉及后端的SpringBoot、MybatisPlus和MySQL。这是一个全面的实战教程，旨在帮助开发者...
antdesign vue中table表头列的拖拽和列宽的拖拽
weixin_48447589的博客
04-09 2593
写项目时遇到一个需求就是表头是可以拖动换位置的，并且需要用户手动拖拽设置宽度，我的项目用的是vue+antdesign vue实现的。这样就可以实现整列的位置拖拽了，你要是想这两个需求同时实现的话，就把他下载一起就可以了，引入import Sortable from 'sortablejs';实现一整列的位置拖拽就得依靠插件来实现了。先下载sortablejs。
在vue3 setup下基于Ant Design Vue 实现一个可拖拽行的表格
aminwangaa的博客
03-18 1043
2、使用ant design vue Table的customRow属性。1、使用原生的drag事件。
Vue2 + ant design vue1.7.8版本 Table组件 手动拖拽、可伸缩列功能
weixin_41832038的博客
08-26 4713
Vue2 手写实现ant design vue 1.7.8低版本 table组件的列拖拽、可伸缩列的功能
vue3中的el-table-column实现拖动调整列宽，并且可以保存调整后的列宽。
strxiaojie的博客
01-19 2498
首先先把表单给写出来，我是通过循环出的表单，如果你们不是还需要按照自己的写法来改一下。接下来，在onMounted中，获取之前保存的列宽，并将其应用到相应的列上。这个比较简单就不多说了，只是一个被循环的数据。事件，用于监听列宽调整的结束事件。方法，用于保存调整后的列宽。
【ant-design-vue】实现table的拖拽排序（拖拽行和伸缩列）：
SunPeng的博客
10-15 6004
【ant-design-vue】实现table的拖拽排序（行和列）：
ant design table vue table 拖拽排序
weixin_44074671的博客
10-19 1690
ant design table vue table 拖拽排序
ant-design-vue实现可拖拽的表格
weixin_42943586的博客
05-24 3989
最近在使用ant-design-vue做表格时，遇到要做一个可伸缩列表格的需求，但是官网示例的代码并不能直接使用。 官方示例使用的vue-draggable-resizable组件来现实拖拽，所以在使用前需要安装组件。 npm install vue-draggable-resizable@2.1.0 示例代码 <template> <a-table bordered :columns="columns" :components="components" :data-source
Ant Design of Vue 表格使用 vue-draggable-resizabl -- 固定列问题修复
m0_44963501的博客
08-10 1033
Ant Design of Vue 表格使用 vue-draggable-resizabl -- 固定列问题修复
antd-vue-table 实现表格的拖拽换顺序，100%成功
Wancc123的博客
02-22 8076
话不多说啊，兄弟们，看到很多人在找这个，我马上给你们安排了 直接上代码安排起来好吧 直接拿捏 <template> <div class="approvalStyle"> <a-table style="margin-top: 20px; background: #fff" :columns="columns" :dataSource="dataSource" :customRow="customRow" &g
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值