element-table 行的拖拽更改顺序(无需下载sortableJs

样例展示:vue+element+

通过阅读element文档我们发现element并不提供拖拽相关的api

本博客通过element提供的行类名 注册函数 实现行与行的拖拽

1.设置el-table 的行样式类名

这里是用的是 function

html 复制代码
            <el-table
              :data="outputData"
              :row-class-name="activeClass"
              class="outputTable"
              >
               .....
             </el-table>
javascript 复制代码
    activeClass ({ row, rowIndex }) {
      if (rowIndex === this.newDragIndex) {
        return 'isDragBox active-drag'
      }
      return 'isDragBox'
    }

2.在mounted获取到row元素

将row设置为的draggable:true拖拽的类型

注册监听函数:

dragstart-拖拽开始 获取拖拽的当前元素index

dragover-拖拽中途 获取拖拽停留的元素的new index

dragEnd-拖拽结束 将数据进行变化

javascript 复制代码
this.$nextTick(() => {
    const dragBox = document.querySelectorAll('.outputTable .isDragBox')
    dragBox.forEach((i, idx) => {
        i.setAttribute('draggable', 'true')
        i.ondragstart = () => this.dragStartItem(idx)
        i.ondragover = () => this.dragOverItem(idx)
        i.ondragend = () => this.dragEndItem()
    })
})

3.dragEnd获取拖拽元素的数据data

将table表格数据去除掉原有的元素 ,将新元素添加到新坐标

javascript 复制代码
    dragStartItem (idx) {
      this.dragIndex = idx
    },
    dragOverItem (index) {
      this.newDragIndex = index
    },
    dragEndItem () {
      const data = this.outputData[this.dragIndex]
      this.outputData.splice(this.dragIndex, 1)
      this.outputData.splice(this.newDragIndex, 0, data)
    },

4.css美化 增加蓝色下划线

注意这里 z-index一定要加否则下划线无法超过table层级无法显示

css 复制代码
.isDragBox{
    cursor: move;
    position: relative;
}
.active-drag{
     position: relative;
      &::after {
        content: '';
        position: absolute;
        top: -1px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #4B79F3;
        z-index:99;
  }
}
相关推荐
世界哪有真情2 分钟前
用虚拟IP扩容端口池:解决高并发WebSocket端口耗尽问题
前端·后端·websocket
前端世界2 分钟前
打造一个可维护、可复用的前端权限控制方案(含完整Demo)
前端
LeQi8 分钟前
当!important成为代码毒瘤:你的项目是不是也中了招?
前端·css·程序员
玲小珑9 分钟前
Next.js 教程系列(九)增量静态再生 (ISR):动态更新的静态内容
前端·next.js
Mintopia18 分钟前
B 样条曲线:计算机图形学里的 “曲线魔术师”
前端·javascript·计算机图形学
前端小巷子21 分钟前
跨域问题解决方案:CORS(跨域资源共享)
前端·网络协议·面试
大大。21 分钟前
van-tabbar-item选中active数据变了,图标没变
java·服务器·前端
Mintopia24 分钟前
Three.js 3D 世界中的噪声运动:当数学与像素共舞
前端·javascript·three.js
paopaokaka_luck24 分钟前
基于SpringBoot+Vue的酒类仓储管理系统
数据库·vue.js·spring boot·后端·小程序
nc_kai24 分钟前
Flutter 之 每日翻译 PreferredSizeWidget
java·前端·flutter