sortablejs结合el-table

vuedraggable 不适合与 el-table 结合使用,所以选用 sortablejs 结合 el-table 实现拖拽表格行,几个关键的点:

  • 需要给 el-table 添加 row-key 属性,提供一个唯一的标识(否则会导致key复用,列表顺序与接口返回顺序不一致)
  • 获取到表格元素,使用 Sortable.create() 初始化后,可对其直接子元素进行拖拽
  • onEnd 事件获取拖拽后的数据,调用排序接口,再获取最新数据
xml 复制代码
<template>
  <div class="app-container">
    <!-- row-key -->
    <el-table class="el-drag-table" :data="tableData" row-key="id">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="age"></el-table-column>
      <el-table-column label="操作">
        <template #default>
          <i class="el-icon-rank drag-handle" style="cursor: grab"></i>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
​
<script>
import Sortable from 'sortablejs'
import { deepClone } from '@/utils'
​
export default {
  name: 'SortableTable',
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 模拟接口请求
    getList() {
      const time = new Date().toLocaleTimeString()
      setTimeout(() => {
        Promise.resolve().then(() => {
          this.tableData = [
            { id: time, name: 'Matt', age: time },
            { id: time + 1, name: 'Matt', age: 2 },
            { id: time + 2, name: 'Matt', age: 3 }
          ]
​
          this.initDragTable()
        })
      }, 200)
    },
    initDragTable() {
      const tbody = document.querySelector('.el-table.el-drag-table .el-table__body-wrapper tbody')
​
      Sortable.create(tbody, {
        handle: '.drag-handle',
        animation: 150,
        onEnd: (evt) => {
          // 获取排序后的数据
          const { oldIndex, newIndex } = evt
          const copyData = deepClone(this.tableData)
          const movedRow = copyData[oldIndex]
          copyData.splice(oldIndex, 1)
          copyData.splice(newIndex, 0, movedRow)
          console.log(deepClone(copyData))
​
          // 调用排序接口...
​
          // 调用列表接口,获取最新数据
          this.getList()
        }
      })
    }
  }
}
</script>
​
<style scoped lang="scss"></style>

参考文档:

npm:www.npmjs.com/package/sor...

github:github.com/SortableJS/...

Demo:sortablejs.github.io/Sortable/

相关推荐
孤水寒月2 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way4 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽6 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头7 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github