Vue Element 表格实现拖拽排序

1、安装sortablejs

npm install sortablejs --save

2、在需要的页面引入

import Sortable from ‘sortablejs’

3、具体使用，注意的是element table务必指定row-key，且row-key必须是唯一的，如 id，不然会出现排序不对的情况

<el-table row-key="id" :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column>
</el-table>

data() {return {tableData: [{id:7458963256145,date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {id:1256358945623,date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {id:7485968563232,date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {id:4230568745963,date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}
}

mounted () {// 调用 table拖拽排序this.rowDrop()this.columnDrop()
}

methods: {// 行拖拽rowDrop () {let tbody = document.querySelector('.el-table__body-wrapper tbody')let _this = thisSortable.create(tbody, {// or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }group: {name: 'words',pull: true,put: true},animation: 150, // ms, number 单位：ms，定义排序动画的时间onAdd: function (evt) { // 拖拽时候添加有新的节点的时候发生该事件console.log('onAdd.foo:', [evt.item, evt.from])},onUpdate: function (evt) { // 拖拽更新节点位置发生该事件console.log('onUpdate.foo:', [evt.item, evt.from])},onRemove: function (evt) { // 删除拖拽节点的时候促发该事件console.log('onRemove.foo:', [evt.item, evt.from])},onStart: function (evt) { // 开始拖拽出发该函数console.log('onStart.foo:', [evt.item, evt.from])},onSort: function (evt) { // 发生排序发生该事件console.log('onUpdate.foo:', [evt.item, evt.from])},onEnd ({ newIndex, oldIndex }) { // 结束拖拽let currRow = _this.tableData.splice(oldIndex, 1)[0]_this.tableData.splice(newIndex, 0, currRow)}})}
}

Vue Element 表格实现拖拽排序相关推荐

vue可视化拖拽组件模板_基于 Vue 丝滑般拖拽排序组件VueSlicksort
今天给大家分享一个功能超强的自由拖拽排序组件VueSlicksort. vue-slicksort 一款功能强大的可拖拽的vue.js组件.拥有丝滑般拖拽动画效果,支持水平/垂直/网格拖拽排序.还可以 ...
vue+element弹窗可拖拽拉伸和弹窗内table高度自适应
需求是这样的:需要将目前的el-dialog弹窗都改成可拉伸和拖拽的.并且做自适应.(一番交涉下来,最终是如果弹窗里面有table的话,我们给table的高度自适应,普通表单不需要). 确定了需求,准 ...
JavaScript操作表格进行拖拽排序
<js-dodo-table- Drag and Drop JQuery plugin > 以上插件可对table进行排序,拖动! 例如有下面一个样子的id为table的表格: <t ...
ant vue 树形菜单横向显示_丝滑般 Vue 拖拽排序树形表格组件Vue-DragTreeTable
今天给小伙伴们分享一款纵享丝滑般体验的Vue拖拽树形表格DragTreeTable. vue-drag-tree-table 基于vue.js实现可拖拽排序的树形表格组件.支持拖拽排序.固定表头.拖拽 ...
Vue + Element 表格拖拽排序、树形表格拖拽排序
今天给大家分享一下表格(列表)及树形表格拖拽排序,树形表格排序的教程不多,可能还会有问题,我在这里详细给大家讲解一下,如果你有这样的需求或觉得有用,请给个关注或收藏一下吧,方便后期查看使用. 安装so ...
基于Vue实现表格拖拽排序——sortablejs
表格拖拽排序 1.安装插件 2.页面引入sortablejs 3.准备表格渲染所需的数据 4.绘制表格结构(要绑定唯一的值row-key,不然会出错) 5.完成表格行与列的拖拽排序事件 1.安装插件 ...
前端项目中常用的工具包（拖拽排序表格、打印导出表格、文本复制等）【持续更新~~~】
表格类: cdn库 cdn vxe-table[开源的多功能表格] 简介一个基于 vue 的 PC 端表格组件,支持增删改查.虚拟滚动.懒加载.快捷菜单.数据校验.树形结构.打印导出.表单渲染.数据 ...
vue.js 拖拽排序_快速轻巧的Vue.js拖放可排序库
vue.js 拖拽排序 vue-smooth-dnd (vue-smooth-dnd) A fast and lightweight drag&drop, sortable library f ...
html5+vue无法拖拽,Vue拖拽排序插件Vuedraggable使用方法详解_心善_前端开发者
大家好,最近做的项目要用到拖拽排序,我现在的项目是首先在 npm install vuedraggable -S 下载下来后,引入插件,在你的vue文件的script标签里面这样引入 import ...

Vue Element 表格实现拖拽排序

Vue Element 表格实现拖拽排序相关推荐

最新文章

热门文章