element ui el-table sorttable实现表格拖拽排序（vuedraggable）

不吃香菜吃葱

已于 2023-05-19 14:56:36 修改

阅读量3.1k

点赞数 1

分类专栏： element-ui 文章标签： ui vue.js javascript elementui html

于 2023-01-11 16:42:13 首次发布

本文链接：https://blog.csdn.net/weixin_44019706/article/details/128647222

版权

element-ui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章展示了如何在Vue项目中利用npm安装sortablejs和vuedraggable库，特别是在已经安装了vuedraggable的情况下，实现el-table组件的行拖拽排序功能。通过Sortable.create方法监听拖放事件，动态调整tableData数组顺序以更新视图。

摘要由CSDN通过智能技术生成

npm install sortablejs --save

如果已经安装了 vuedraggable ，则可以不用安装 sortablejs

npm install vuedraggable

在这里插入图片描述

<template>
  <div style="width:800px" class="draggable">
  	// 这里的id需要是tableData数组中存在的，可以换成任意唯一值就行
    <el-table :data="tableData" row-key="id" border align="left">
      <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: [
        {
          id: '1',
          date: '2016-05-02',
          name: '王小虎AAA',
          address: '沈阳市普陀区金沙江路2000-1518弄'
        },
        {
          id: '2',
          date: '2016-05-04',
          name: '王小虎BBB',
          address: '北京市普陀区金沙江路2020-1618弄'
        },
        {
          id: '3',
          date: '2016-05-01',
          name: '王小虎CCC',
          address: '成都市普陀区金沙江路2040-1718弄'
        },
        {
          id: '4',
          date: '2016-05-03',
          name: '王小虎DDD',
          address: '天津市普陀区金沙江路2030-1818弄'
        }
      ]
    }
  },
  mounted () {
    this.rowDrop()
  },
  methods: {
    //行拖拽
    rowDrop () {
      const tbody = document.querySelector(
        ".draggable .el-table__body-wrapper tbody"
      );
      console.log(tbody, 'tbody')
      const _this = this
      Sortable.create(tbody, {
        animation: 150,
        draggable: ".draggable .el-table__row",
        onEnd ({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          const aa = _this.tableData.splice(newIndex, 0, currRow)
          console.log(aa)
        }
      })
    },
  }
}
</script>
<style scoped>
</style>