vue2 element ui 的表格使用 sortablejs 拖拽列遇到的问题和解决方案

这篇具有很好参考价值的文章主要介绍了vue2 element ui 的表格使用 sortablejs 拖拽列遇到的问题和解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目使用 element ui 的表格实现拖动表头可改变列的宽度,又使用sortablejs实现表格的列可拖拽到其他列的位置,导致出现如下的一些问题:

1、某一列宽变大或变小后,只有当前列可拖拽,其他列无法拖拽。

解决方案:在列宽发生改变后,销毁当前拖拽实例,再重新创建拖拽实例。

this.sortDemo.destroy()

此方法可查看sortablejs官网 Sortable.js中文网

2、当表格没有横向滚动条时,某一列宽变大或变小时,其他列宽也会变大或变小。

根因:表格的每一列设置了min-width,当表格没有横向滚动条时,某一列宽变大或变小时,min-width 会把剩余宽度按比例分配给设置了 min-width 的列,这样才可以撑开表格的整体宽度。

结论:当表格有横向滚动条时就不会出现这个问题。

3、当表格没有数据时,列不可以拖拽,改变列宽后可拖拽。

解决方案:表格数据更新后,不管表格数据接口有没有返回数据,都需重新挂载拖拽监听事件,才可以拖拽列。文章来源地址https://www.toymoban.com/news/detail-716474.html

this.reDrawTable()

到了这里,关于vue2 element ui 的表格使用 sortablejs 拖拽列遇到的问题和解决方案的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue2/3 - 基于element(ui/plus)实现el-table表格每行可拖动换位置排序,表格列(表头)可拖动交换位置功能效果(table表格可拖曳排序的行和列,用鼠标动态拖拽排序表格行列)

    在vue2、vue3项目开发中,element饿了么组件库实现表格el-table组件支持【行和列可拖曳排序、换位置】功能,每行数据可拖拽进行排序调换位置,每列数据可以自由拖动进行调换位置。 提供详细示例代码,复制源码换个数据就能用了。

    2024年04月13日
    浏览(46)
  • Vue+ElementUI技巧分享:结合Sortablejs实现表格行拖拽

    在很多动态网页应用中,用户界面的交互性是提高用户体验的关键。在 Vue.js 中,结合 Element UI 和 sortablejs ,我们可以轻松实现表格的行拖拽功能。本文将演示如何在 Vue 项目中使用这些工具,并在拖拽后将数据更新到后端服务系统。 确保你的项目中已经安装了 Element UI 和

    2024年02月04日
    浏览(49)
  • 随手记:vue2 使用element UI table表格的单选多选反选思路

    selection-change 参数只有一个selection : 可以获取到当前勾选的row的数据,勾选自动行程数组 @selection-change=\\\"handleSelectionChange\\\"    // 多选框选中数据     handleSelectionChange(selection) {         //selection 是勾选中的数组     },  select 参数 selection 选中的数组  row 当前选中的单条数

    2024年04月26日
    浏览(25)
  • Vue3+element plus+sortablejs实现table列表拖拽

    1、安装 2、引入 3、使用 表格表头必须加 row-key ,否则会出现排序错乱 完整代码 table.vue

    2024年02月07日
    浏览(37)
  • vue+element ui+vuedraggable实现表格内不同格子间标签的拖拽

    最近有个需求是实现在表格内上下不同格子间标签的拖拽,然而element ui并没有提供此类api,后面我导入vuedraggable包实现了此需求,效果见视频。 demo视频: element ui表格内标签拖拽demo 首先要去下载vuedraggable包 去package.json文件里看包是否下载成功 下载完成后新建页面 页面完整

    2024年04月29日
    浏览(24)
  • vue 实现element-ui 表格的行拖拽排序 (Sortable)

    Sortable它是一个比较简单好用的拖拽排序工具 1.首先是安装下载Sortable (npm install sortablejs --save) 2.在要进行拖拽的页面引入Sortable (import Sortable from \\\'sortablejs\\\') 3.写个方法去处理你需要的数据,这里需要注意一下需要等待元素渲染完成后再执行此方法  4.处理好数据以后再去

    2024年02月11日
    浏览(46)
  • vue2&Element-ui实现表格单元格合并

    由于项目需要实现单元格合并目前只是单页没有做分页处理先上效果图 看下数据结构 Element table提供的api arraySpanMethod columnIndex=0表示从第一列开始 rowIndex表示需要操作的行数 同济医院加上合计有12行从0开始=11 判断条件是rowIndex余12===0 我们打印一下 或者改成 表示从0开始到1

    2024年02月12日
    浏览(33)
  • vue2实现可拖拽甘特图(结合element-ui的gantt图)

      接到公司需求,要做一个可拖拽的甘特图来实现排期需求,官方的插件要付费还没有中文的官方文档可以看,就去找了各种开源的demo来看,功能上都不是很齐全,于是总结了很多demo,合在一起组成了一版较为完整的满足需求的甘特图。 1.拖拽  拖拽功能是甘特图的主要功

    2024年02月03日
    浏览(41)
  • Vue2.0+element-ui实现表格的增删查改

    vue2做了个表格的demo,有增删改查的功能,记录一下,喜欢就点个赞收藏一下吧~ 效果: 1.主文件list-page.vue 列表页 2.弹窗页面(新增/编辑公用一个弹窗页面)

    2024年02月10日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包