本文采用国外小哥的demo教程,地址:https://github.com/SortableJS/Sortable。下面引用一个例子:
拖拽效果,先放效果图,步骤放在后面~~
一、引入三方插件
1.引入sortable.js的包: npm install sortable.js --save
2.或者npm i -S vuedraggable
vuedraggable依赖 Sortable.js,所以下载了vuedraggable,我们便可以直接引入Sortable使用Sortable的特性。
vuedraggable是Sortable一种加强,实现组件化的思想,可以结合Vue,使用起来更方便
二、Sortable使用
在这里我们还是使用一句Sortable的构建方式
import Sortable from 'sortablejs';
三、实例
需要注意的是element table务必指定row-key,row-key必须是唯一的,如ID,不然会出现排序不对的情况。
<template> <div style="width:800px"> <el-table :data="tableData" border row-key="id" align="left"> <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].prop" :label="item.label"> </el-table-column> </el-table> <pre style="text-align: left"> {{dropCol}} </pre> <hr> <pre style="text-align: left"> {{tableData}} </pre> </div> </template> <script> import Sortable from 'sortablejs' export default { data() { return { col: [ { label: '日期', prop: 'date' }, { label: '姓名', prop: 'name' }, { label: '地址', prop: 'address' } ], dropCol: [ { label: '日期', prop: 'date' }, { label: '姓名', prop: 'name' }, { label: '地址', prop: 'address' } ], tableData: [ { id: '1', date: '2016-05-02', name: '王小虎1', address: '上海市普陀区金沙江路 100 弄' }, { id: '2', date: '2016-05-04', name: '王小虎2', address: '上海市普陀区金沙江路 200 弄' }, { id: '3', date: '2016-05-01', name: '王小虎3', address: '上海市普陀区金沙江路 300 弄' }, { id: '4', date: '2016-05-03', name: '王小虎4', address: '上海市普陀区金沙江路 400 弄' } ] } }, mounted() { this.rowDrop() this.columnDrop() }, methods: { //行拖拽 rowDrop() { const tbody = document.querySelector('.el-table__body-wrapper tbody') const _this = this Sortable.create(tbody, { onEnd({ newIndex, oldIndex }) { const currRow = _this.tableData.splice(oldIndex, 1)[0] _this.tableData.splice(newIndex, 0, currRow) } }) }, //列拖拽 columnDrop() { const wrapperTr = document.querySelector('.el-table__header-wrapper tr') this.sortable = Sortable.create(wrapperTr, { animation: 180, delay: 0, onEnd: evt => { const oldItem = this.dropCol[evt.oldIndex] this.dropCol.splice(evt.oldIndex, 1) this.dropCol.splice(evt.newIndex, 0, oldItem) } }) } } } </script>
收藏的用户(0) X
正在加载信息~
推荐阅读
最新回复 (0)
站点信息
- 文章2300
- 用户1336
- 访客10731099
每日一句
Love is the bridge between you and everything.
爱是你与一切之间的桥梁。
爱是你与一切之间的桥梁。
wordpress采集器——Wp-AutoPost精简无限制版
linux文件夹打包命令
ndk神奇问题之non-numeric second argument to `wordlist' function: '8.7z'
XEON E5无法使用系统评分解决方法
win10利用winsat disk测试磁盘读写速度
C++ 11新语法获取系统盘符
Android Studio使用Opencv2.4.9进行NDK开发
10年后,Android应用程序仍然比iOS应用程序差
Notepad++如何代码格式化——NppAStyle
iMessage for Android是我们需要的但不是我们想要的
二进制加壳原理与实现
仙剑奇侠传3d回合-PC端辅助
adb logcat 命令行用法
新会员