Sortablejs实现vue项目表格拖动排序
1.简介:Sortable.js是一款优秀的js拖拽库,支持ie9及以上版本ie浏览器和现代浏览器,也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库,如Bootstrap、Element UI。你可以用来拖拽div、table等元素。2.官网:(1)中文文档教程:sortable.js中文文档 - itx
·
1.简介:
Sortable.js是一款优秀的js拖拽库,支持ie9及以上版本ie浏览器和现代浏览器,也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库,如Bootstrap、Element UI。你可以用来拖拽div、table等元素。
2.官网:
(1)中文文档教程:sortable.js中文文档 - itxst.comhttps://www.itxst.com/sortablejs/neuinffi.html
(2)直观了解及效果使用:Sortable.js中文网http://www.sortablejs.com/
(3)详细文档教程:sortablejs - npmhttps://www.npmjs.com/package/sortablejs
3.使用:
(注:row-key==>值数据中id,id:标记表格行)
<template> <div class="main-content"> <el-table ref="multipleTable" :data="tables" border fit highlight-current-row row-key="id" id="tableRowDrop" > <el-table-column>11</el-table-column> <el-table-column>22</el-table-column> <el-table-column>33</el-table-column> </el-table> </div> </template><script>
import Sortable from 'sortablejs' //下载插件命令:npm install sortablejs --save export default { data(){ return{ tables:[], //保存表格显示数据 rowSortOld:[], //保存表格行拖动前:id顺序数组(旧) rowSortNew:[] //保存表格行拖动后:id顺序数组(新) } }, mounted() { //阻止默认行为 document.body.ondrop = function (event) { event.preventDefault(); event.stopPropagation(); }; //列表行拖拽后顺序数组 this.rowDrop(); }, methods: { //表格行拖拽 rowDrop() { //获取表格对象 const tbody = document.querySelector('#tableRowDrop tbody'); const _this = this; //(注意此处引用) Sortable.create(tbody, { onEnd({ newIndex, oldIndex }) { const currRow = _this.tables.splice(oldIndex, 1)[0]; _this.tables.splice(newIndex, 0, currRow); } //保存列表拖拽后顺序 _this.rowSortNew = []; //每次列表拖拽前,清空上次数据 for(let i in _this.tables){//多个对象需遍历赋值 _this.rowSortNew.push(_this.tables[i]['id']); } //列表拖拽后顺序 _this.updateTableSort(_this.rowSortNew); }) }, //列表拖拽后顺序 updateTableSort(rowSortNew){ //控制台输出对比前后顺序 console.log('列表拖拽前顺序id数组:'+this.rowSortOld); console.log('列表拖拽后顺序id数组:'+rowSortNew); const formData = new FormData(); //此处封装便于传递给后台 formData.append('rowSortOld',JSON.stringify(this.rowSortOld)); formData.append('rowSortNew',JSON.stringify(rowSortNew)); }, //获取表格渲染数据 getList() { apiGet(this, this.url).then((res) => { this.tables = res.data; //保存列表拖拽前顺序id(注:此ID为列信息中的ID,多个对象需遍历赋值) for(let i in res.data){ this.rowSortOld.push(res.data[i].id); } }); } }</script>
更多推荐
已为社区贡献2条内容
所有评论(0)