ElementUI 基于vue+sortable.js实现表格行拖拽
2021-02-05 22:25
141 查看
基于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>
参考连接
相关文章推荐
- 基于Vue实现可以拖拽的树形表格实例详解
- vue2.0使用Sortable.js实现的拖拽功能
- 说说如何基于 Vue.js 实现表格组件
- vue.js实现的全选与全不选功能示例【基于elementui】
- vue2.0使用Sortable.js实现的拖拽功能示例
- vue2.0使用Sortable.js实现的拖拽功能
- vue2.0使用Sortable.js实现的拖拽功能
- 基于Vue实现可以拖拽的树形表格(原创)
- Vue.js——基于$.ajax实现数据的跨域增删查改
- Vue.js——基于$.ajax实现数据的跨域增删查改【4】
- JS组件Bootstrap Table表格多行拖拽效果实现代码
- JS组件Bootstrap Table表格多行拖拽效果实现代码
- 简单实现拖拽的方法 sortable.js
- Vue.js – 基于 MVVM 实现交互式的 Web 界面
- 详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
- JS基于面向对象实现的拖拽功能示例
- Vue.js实现表格动态增加删除的方法(附源码下载)
- 基于vue.js实现侧边菜单栏
- 基于Vue实现拖拽效果
- vue基于video.js实现视频播放暂停---切图网