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 > <el-table :data="tableData" border >  <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.shaoqun.com/a/530575.html

跨境电商：https://www.ikjzd.com/

feedback：https://www.ikjzd.com/w/159

mein：https://www.ikjzd.com/w/1601

基于vue+sortable.js实现表格行拖拽By:授客QQ：1033553122实践环境sortablejs@1.13.0vue@2.6.11element-ui@2.13.2安装sortable.js拖拽库npminstallsortablejs代码示例<template><div><el-table:data="tableData"bord
宝贝格子：宝贝格子
r标：r标
Amazon Influencer Program：Amazon Influencer Program
亚马逊精细化运营每天都需要做哪些工作？：亚马逊精细化运营每天都需要做哪些工作？
Business report：Business report