Vxe-Table 拖拽排序失效

最新推荐文章于 2024-08-22 22:28:06 发布
最新推荐文章于 2024-08-22 22:28:06 发布
阅读量2.1k 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pengain/article/details/112849150
版权

亲测，如果严格按照官方示例，拖拽功能是好使的
在这里插入图片描述
今天在调界面时，发现有个界面的拖拽排序功能，因为数据过多，出了滚动条后，拖拽拿到的newIndex数值不对，调试了半天，才找到原因。

官方例子

而此处的newIndex数值不对，主要原因是 XXX 将没看懂的属性 :scroll-y="{enabled: false}"删除掉了，导致有滚动条时，拖拽行的 newIndex 重新计算了导致的。

悟●禅●酒
关注
专栏目录
Vue2 - 解决 iView 表格组件 Table 滚动条无法拖动问题，表格固定列时滚动条失效导致拖拽没反应，把表格的某列固定后横向或纵向滚动条无法滚动的问题处理（有合计行或固定时导致失效无法拖曳）
王佳斌
07-14 2667
iview，vue，表格组件，table，滚动条，无法拖曳，拖动，无效，不生效，没反应，table固定列后,进度条无法拖拽iview固定列导致滚动条失效，也不报错，样式，无法覆盖，deep，iview table组件当固定高度后，fixed某一列会出现盖住滚动条的情况，滚动条始终位于可视区域的实现，详细解决方案，如何解决这个问题，样式覆盖依然报错，无法滚动，鼠标拖住不动，设置固定列，横向滚动条在固定列的位置上无法滚动的问题，vue2 iview表格固定后滚动条无法拖动，解决iview带合计行表格固定列后滚动
vue中实现表格内容拖拽进行自定义排序
g1437353759的博客
10-09 1898
先看效果： 需求是在列表数据加载出来之后，页面可以对数据进行拖动排序并进行保存 <vxe-table :data.sync="tableData" // 绑定返回的数据 ref="paySlipTable" id="paySlipTable" row-key class="sortable-row-demo" :scroll-y="{ enabled: false }" @ciic-data-refres
vxe-table实现行拖拽
最新发布
weixin_41463944的博客
08-22 348
vxe-table实现行拖拽
VXETable 按需引入不能排序,sortable不生效问题
japlus的博客
11-30 2620
根据文档，按需引入，配置sortable排序不生效问题 官方示例如下 import XEUtils from 'xe-utils' import {VXETable, Header, Column, Colgroup, Table } from 'vxe-table' import zhCN from 'vxe-table/lib/locale/lang/zh-CN' VXETable.setup({ i18n: (key, args) => XEUtils.toFormatString
Vxe UI vxe-table 实现自定义列拖拽，列拖拽排序功能
我的博客
06-07 1465
Vxe UI vxe-table 实现自定义列拖拽，列拖拽排序功能
vxe-table的pulldown组件滚动条无法拖动滚动
solooooooh的博客
05-26 564
解决方法：把下拉容器中嵌套的vxe-table的position：relative改为static即可。滚动条不支持拖动，只有在滚轮时生效。
解决：使用sortablejs库对el-table设置拖拽，但拖拽一直不生效。
qq_38969618的博客
04-12 8269
问题原因：我安装错了库名！！！我直接在npm上搜，看到第一个显示的sortable.js，就直接错误安装npm install --save sortable.js，导致在我的vue+ts项目某个el-dialog页面使用时，拖拽一直不起作用。实际正确的应该是：sortablejs, 正确的库名是没有小数点分隔。 正确使用如下： 第一步：先安装插件 npm install sortablejs --save 第二步：在页面中引入插件&使用即可。 // demo.vue <tem
vxe-table vue表格解决方案 v4.5.20.zip
03-27
vxe-table是一款开源的Vue表格组件，它提供了丰富的表格功能，包括但不限于数据排序、筛选、分页、合并单元格、拖拽列宽、行列固定、自定义操作等。这个组件不仅易于集成到现有的Vue项目中，而且在性能优化方面也做...
vxe-table vue表格解决方案 v2.11.0.zip
03-27
《vxe-table：Vue表格解决方案详解》 在前端开发领域，数据展示是不可或缺的一部分，而表格作为数据展示的重要载体，其灵活性和可扩展性尤为重要。vxe-table是一款基于Vue.js框架的高性能表格组件，它提供了丰富的...
vxe-table-plugin-menus::deciduous_tree: 基于 vxe-table 的表格插件，提供实用的快捷菜单集
04-13
vxe-table-plugin-menus 基于 的表格插件，提供实用的快捷菜单集 Installing npm install xe-utils vxe-table@next vxe-table-plugin-menus@next // ... import VXETable from 'vxe-table' import ...
vxe-table vue表格解决方案 v3.7.9.zip
04-02
《vxe-table vue表格解决方案 v3.7.9》是一个专为Vue.js开发的高性能、易用的表格组件库，其版本号为3.7.9。作为一个强大的前端UI组件，vxe-table提供了丰富的功能，旨在帮助开发者在构建数据驱动的Web应用时，能够...
vxe-table::dolphin: vxe-table vue 表格解决方案
05-11
vxe-table 简体中文|| 一个基于的PC端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等....
vxe-table表格组件给row-style和cell-style等修改样式无效的问题，例如：background-color
dlchgg的博客
04-04 643
jsx导致的动态样式失效：background-color得写成backgroundColor
vxe-table+Sortable实现大数据表格的拖动
m0_60671885的博客
01-18 1681
【代码】vxe-table+Sortable实现大数据表格的拖动。
vex-table 实现 表格拖动 && 行拖拽
m0_46907690的博客
07-31 6740
在项目开发中 用到 vex-table 表格插件 因为项目需要 所以要用到拖动功能 说实话个人认为 这个插件的功能还是蛮强大的 基本上 正常开发需要的功能都有 好了话不多说 直接介绍功能 该表格有两种体现形式 vxe-grid 和 vxe-table 这个两种 如果想提高页面渲染优化的 话建议使用 vxe-grid (本文使用的案例也是 vxe-grid) 本文以行拖拽为例 有几个重要属性 ref 和 row-key (ref 作用是找到对应的表格 row-key 的作用是 对应行的索引 在拖
vue+vxe-table中的vxe-table-column配合v-if导致列样式与位置错乱_ShaLiWa的博客-程序员秘密
小扣柴扉久
12-21 625
原文地址 https://www.cxymm.net/article/ShaLiWa/119773845
Vue实现可编辑表格（vxe-table）列表上下拖拽
2301_77529176的博客
05-30 909
网址：https://sortablejs.com/
vue3关于vxe-table可拖拽排序的自定义指令
shou_11的博客
11-13 1069
【代码】vue3关于vxe-table可拖拽排序的自定义指令。
vxe-table 拖拽排序
01-27
vxe-table提供了拖拽排序的功能，可以通过拖拽表格行来改变它们的顺序。下面是一个演示如何使用vxe-table实现拖拽排序的例子： ```html <template> <div> <vxe-table ref="table" :data="tableData" :columns="columns" :sortable="true" @sort-change="handleSortChange" ></vxe-table> </div> </template> <script> import 'vxe-table/lib/style.css'; import { VXETable } from 'vxe-table'; export default { data() { return { tableData: [ { id: 1, name: 'John', age: 20 }, { id: 2, name: 'Mike', age: 25 }, { id: 3, name: 'Tom', age: 30 }, { id: 4, name: 'Jerry', age: 35 }, ], columns: [ { field: 'id', title: 'ID', width: 80 }, { field: 'name', title: 'Name', width: 120 }, { field: 'age', title: 'Age', width: 80 }, ], }; }, mounted() { VXETable.setup({ table: { mouseConfig: { selected: true, checked: true, checkedByClickRow: true, checkedByCell: true, }, }, }); }, methods: { handleSortChange({ column, order }) { const { table } = this.$refs; table.sort(column.field, order); }, }, }; </script> ``` 在上面的例子中，我们使用了vxe-table的`sortable`属性来启用拖拽排序功能。当用户拖拽表格行时，`sort-change`事件会被触发，我们可以在事件处理函数中调用`table.sort`方法来实现排序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悟●禅●酒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值