欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

elementUITable组件实现拖拽效果

程序员文章站 2022-06-08 21:06:17
elementui table实现拖拽效果 背景 使用element ui table+vue实现表格的拖拽。在github上搜索了下发现sortable这款插件挺不错的,star14000+,而且...
elementui table实现拖拽效果

背景

使用element ui table+vue实现表格的拖拽。在github上搜索了下发现sortable这款插件挺不错的,star14000+,而且还支持vue等多种主流的前端框架,可谓是十分的强大。最重要的原因是,完全不依赖jq。

vue.draggable,vue版本的sortable。拖拽后能够使数据模型同步,完美兼容vue的数据视图双向绑定。

下面贴一下官方demo

看得出来真的很强大。数据实时的响应同步,结合vue我们根本不需要对数据进行复杂的逻辑处理。

准备

安装依赖

npm i -s vuedraggable

vuedraggable依赖 sortable.js,所以下载了vuedraggable,我们便可以直接引入sortable使用sortable的特性。

vuedraggable是sortable一种加强,实现组件化的思想,可以结合vue,使用起来更方便。

sortable使用

在这里我们还是使用一句sortable的构建方式

import sortable from 'sortablejs';

导入sortable类,创建拖拽函数

drag() {

const el = document.queryselectorall('.el-table__body-wrapper > table > tbody')[0];

sortable.create(el, {

disabled: !this.enabledrag,

ghostclass: 'sortable-ghost',

setdata: function(datatransfer) {

datatransfer.setdata('text', '');

},

onend: (evt) => {

}

});

},

我们在数据加载完成之后,就调用drag()方法来开启拖拽功能。

介绍下几个参数的作用:

el 代表我们要侦听拖拽响应的dom对象

disabled 是否开启拖拽

ghostclass 拖拽时可以给加上样式

setdata 回调html5 dragevent的datatransfer`对象,来设置显示的数据

onend 结束拖拽后的回调函数,evt包含oldindex,newindex等一系列属性。

完整属性列表

演示