网站活动页面设计,如何制作小程序赚钱,海口网站建设过程,免费查企业哪个软件最好最近在写后台管理系统的时候#xff0c;遇到一个需求#xff0c;就是关于拖动排序的功能。
我之前是写过一个关于拖动表格的功能#xff0c;此功能可以实现表格中的每一行数据上下拖动实现排序的效果。 vue——实现表格的拖拽排序功能——技能提升
但是目前我这边的需求是…最近在写后台管理系统的时候遇到一个需求就是关于拖动排序的功能。
我之前是写过一个关于拖动表格的功能此功能可以实现表格中的每一行数据上下拖动实现排序的效果。 vue——实现表格的拖拽排序功能——技能提升
但是目前我这边的需求是实现属性的拖动直接上图 比如上图我要拖动【管制卡号】到【客供】的后面 话不多说直接上代码
解决步骤1安装vuedraggable插件
npm install vuedraggable2.24.3 //我这边安装的是这个版本你也可以直接安装最新版本的就是不指定版本号就是最新版本了解决步骤2局部页面使用
组件引入
import draggable from vuedraggable;组件中的注册
components: { draggable },效果图中左侧属性的渲染 this.枚举列表 [测试,样板/批量,新单/返单]
a-checkbox-groupv-modelcanDragArr
draggablestart.stopdragStartend.stopdragEndupdate.stoponUpdatetransition-group typetransition namefield_lista-checkboxv-foritem1 in 枚举列表:keyitem1:valueitem1stylemin-width: 100px{{ item1 }}/a-checkbox/transition-group/draggable
/a-checkbox-group分析上面的代码
关于拖动排序要用到的函数有【start】【end】【update】
对应的函数
dragStart() {//
},
dragEnd() {//
},
/*** draggable拖拽组件对象重新排序*/
onUpdate({ newIndex, oldIndex }) {const newColumnsList [];// 防止页面变化const columnsList JSON.parse(JSON.stringify(this.枚举列表));newColumnsList[newIndex] columnsList[oldIndex];columnsList.splice(oldIndex, 1);columnsList.forEach((value, index) {if (newColumnsList[index]) {newColumnsList[index 1] value;} else {newColumnsList[index] value;}});console.log(newColumnsList, newColumnsList);
},上面代码中的newColumnsList就是拖动排序后的数组了。。。
如果是部分参数不想支持拖动怎么处理
draggable插件是有属性可以设置不可拖动的。就是——filter 比如要将枚举列表中的【测试】一项设置为不可拖动的则可以设置如下
draggablestart.stopdragStartend.stopdragEndfilter.unDragupdate.stoponUpdate
transition-group typetransition namefield_lista-checkboxv-foritem1 in 枚举列表:keyitem1:valueitem1:class[item1测试 ? unDrag : ,]stylemin-width: 100px{{ item1 }}/a-checkbox/transition-group
/draggable但是这样就有一个问题【测试】属性不可拖动了但是其他的属性可以拖动到【测试】的前后这样也不是我们想要的。
我们想要的效果是下面的这种 所以最后我的处理办法是将枚举列表分为可拖动和不可拖动两种。
完成多多积累多多收获
