使用sortable的踩坑记录

1、如果你的排序是调用了接口，然后刷新列表来更新排序的，那么要注意：如果排序接口发送后排序发生混乱，那很有可能是传给sortable的排序元素没有给key，

如果是列表（el-table），注意列表要设置:row-key，如果是一般的元素，要给元素添加上key属性或者id属性

2、如果想要移动中断，移动时有判断条件，不符合判断条件的就阻止移动，那么可以 onMove事件中做这件事

onMove(evt) {// 不符合判断条件，立即还原交换if (判断条件) {return false}},

同时：一定要设置forceFallback这个属性并且值为 false，否则不会中断

3、在onMove事件，会返回evt.dragged（被拖拽的元素），evt.related（要交换的目标元素）这两个元素，但是有时我们光有这两个元素是不够的，我们更想要他们的rowindex，以方便获取到列表数据，更好的操作，这时就需要注意，一般情况onMove是不会返回index的，需要设置

setData(dataTransfer) {dataTransfer.setData('Text', '');},

只有设置了这个方法，onMove中才会返回evt.dragged.rowIndex和evt.related.rowIndex

使用sortable的踩坑记录相关推荐

为Jupyter notebook配置R kernel过程及踩坑记录
为Jupyter notebook配置R kernel过程及踩坑记录注意:本文为作者安装过程及折腾的过程,内容比较冗杂,如果读者想直接创建一个属于自己的子环境则参考: 如下文章: anaconda下 ...
Python打包工具Pyintealler打包py文件为windows exe文件过程及踩坑记录+实战例子
Python打包工具Pyintealler打包py文件为windows exe文件过程及踩坑记录+实战例子目录 Python打包工具Pyintealler打包py文件为windows exe文件过程 ...
TVM: Deep Learning模型的优化编译器(强烈推荐, 附踩坑记录)
本文作者是阿莱克西斯,原载于知乎,雷锋网(公众号:雷锋网)获得授权转载. (前排提醒,本文的人文内容部分稍稍带有艺术加工,请保持一定的幽默感进行阅读) 关注我最近想法的同学应该知道我最近都在把玩 TV ...
使用Java读取 “Python写入redis” 的数据踩坑记录
https://my.oschina.net/u/2338224/blog/3061507 使用Java读取 "Python写入redis" 的数据踩坑记录 https://seg ...
osx php7 imagick,[PHP] MacOS 自带php环境安装imagick扩展踩坑记录 | 码农部落
前言最近学习yii2,在搭建环境后,发现在访问contact页面时报错,如下: "Either GD PHP extension with FreeType support or Imag ...
vue-i18n使用及踩坑记录
使用步骤 1. 安装 npm i vue-i18n 2. vue-cli下使用 //1. 引入 vue-i18n import Vue from 'vue' import VueI18n from ' ...
SpringBoot踩坑记录 Invalid bound statement (not found)引发的一些列问题
SpringBoot踩坑记录 Invalid bound statement (not found)引发的一些列问题当你开开心心搭建了一个SpringBoot项目,用插件生成了entity.dao. ...
mysql 使用sum limit_mysql踩坑记录之limit和sum函数混合使用问题
问题复盘本次复盘会用一个很简单的订单表作为示例. 数据准备订单表建表语句如下(这里偷懒了,使用了自增ID,实际开发中不建议使用自增ID作为订单ID) CREATE TABLE `order` ( ...
【踩坑记录】Tensorflow在Windows下使用
[踩坑记录]Tensorflow在Windows下使用 TensorFlow 是一个端到端开源机器学习平台安装 pip3 install tensorflow 使用时报错如下 2021-04-21 ...

使用sortable的踩坑记录

使用sortable的踩坑记录相关推荐

最新文章

热门文章