el-table 实现行拖拽排序

element ui 表格实现拖拽排序的功能,可以借助第三方插件Sortablejs来实现。

引入sortablejs

复制代码
npm install sortablejs --save
组件中使用
复制代码
import Sortable from 'sortablejs';

 <el-table ref="el-table":data="listData" row-key="id" style="width: 100%">
 </el-table>

注意:el-table一定要设置row-key,且row-key绑定的值唯一,不然拖拽可能乱序

复制代码
 mounted() {
    this.initSort()
 },
 initSort() {
    const el = this.$refs['el-table'].$el.querySelector('.el-table__body-wrapper > table > tbody')
    let _this = this;
    const ops = {
       animation: 200, //动画时长
       handle: ".el-table__row", //可拖拽区域class
       //拖拽中事件
       onMove: ({ dragged, related }) => {
         const oldRow = _this.listData[dragged.rowIndex] //旧位置数据
         const newRow = _this.listData[related.rowIndex] //被拖拽的新数据
       },
       //拖拽结束事件
       onEnd: evt => {
         const curRow = _this.listData.splice(evt.oldIndex, 1)[0]
         _this.listData.splice(evt.newIndex, 0, curRow)
       }
    }
    Sortable.create(el, ops)
 },
相关推荐
江城开朗的豌豆几秒前
Vue项目多代理配置指南:轻松搞定跨域请求分流!
前端·javascript·vue.js
全宝2 分钟前
🚀 一文搞定 claude code:国内环境下的安装、配置与体验
前端·ai编程·claude
寻觅~流光7 分钟前
封装---优化try..catch错误处理方式
开发语言·前端·javascript·typescript
csj5010 分钟前
前端基础之《Vue(22)—安装MongoDB》
前端·vue
今天也在写bug12 分钟前
输入npm install后发生了什么
前端·npm·node.js
玲小珑38 分钟前
Next.js 教程系列(十六)Next.js 中的状态管理方案
前端·next.js
前端小巷子39 分钟前
web实现文件的断点续传
前端·javascript·面试
小磊哥er40 分钟前
【前端工程化】前端项目怎么做代码管理才好?
前端
jojo是只猫1 小时前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机5 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js