欢迎光临
我的个人博客网站

ElementUI 基于vue+sortable.js实现表格行拖拽


基于vue+sortable.js实现表格行拖拽

By:授客 QQ:1033553122

实践环境

sortablejs@1.13.0

vue@2.6.11

element-ui@2.13.2

安装sortable.js拖拽库

npm install sortablejs 

代码示例

<template>   <div class="demo-table-wrapper">     <el-table :data="tableData" border 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>   </div> </template>  <script> import Sortable from "sortablejs";  export default {   data() {     return {       tableData: [         {           date: "2016-05-02",           name: "王小虎1",           address: "上海市普陀区金沙江路 1518 弄1"         },         {           date: "2016-05-04",           name: "王小虎2",           address: "上海市普陀区金沙江路 1517 弄2"         },         {           date: "2016-05-01",           name: "王小虎3",           address: "上海市普陀区金沙江路 1519 弄3"         },         {           date: "2016-05-03",           name: "王小虎4",           address: "上海市普陀区金沙江路 1516 弄4"         }       ]     };   },    mounted() {     this.dragRow();   },   methods: {     // 行拖拽     dragRow() {       // 查找要拖拽元素的父容器       const tbody = document.querySelector(         ".demo-table-wrapper .el-table__body-wrapper tbody"       );        const _this = this;       Sortable.create(tbody, {         draggable: ".demo-table-wrapper .el-table__row", //  指定父容器下可被拖拽的子元素          onEnd({ newIndex, oldIndex }) {           /**            * onEnd 拖拽结束后的事件处理函数            * newIndex:目标位置对应行的索引            * oldIndex:被拖拽行的索引            *             * ====================(被拖拽记录行1)            * before            * ====================(拖拽至目标位置对应记录行)            * after            * ====================(被拖拽记录行2)            * 如果从上往下拖拽,即newIndex > oldIndex,那么在目标位置对应记录行上移(目标位置对应记录行索引值减1),在newIndex所指位置插入被拖拽行(被拖拽行索引设置为newIndex),视觉效果就是在after位置(即目标位置对应行下方)插入被拖拽行            * 如果从下往上拖拽,即newIndex < oldIndex,那么在目标位置对应记录行下移(目标位置对应记录行索引值加1),在newIndex所指位置插入被拖拽行(被拖拽行索引设置为newIndex),视觉效果就是在上述before位置(即目标位置对应行上方)插入被拖拽行            * */             console.log(newIndex, oldIndex);           if(newIndex > oldIndex){               // 请求服务器做数据更新处理,然后根据处理结果对前端页面处理            } else {               // 请求服务器做数据更新处理 ,然后根据处理结果对前端页面处理           }                    }       });     }       } }; </script>  <style scoped> .demo-table-wrapper { } </style> 

参考连接

http://www.itxst.com/sortablejs/neuinffi.html

赞(0) 打赏
未经允许不得转载:张拓的天空 » ElementUI 基于vue+sortable.js实现表格行拖拽
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏