Element-ui el-table 使用 SortableJS 实现表格拖拽排序，并将排序结果更新到数据库使数据行顺序修改

前言

当我们使用 Element el-table 组件时，需要用到拖拽排序的需求时，虽然 el-table 自带支持按列排序，但是当我们自己拖拽进行排序时，现有组件是无法满足的。

这个时候我们就需要引入一个强大的js拖拽库：SortableJS

该拖拽库简单易上手，官网提供了我们常用的拖拽效果的demo，下面我主要记录一下如何在我们的项目中快速上手使用。

一、安装

安装方式分为三种：

1、npm 或 yarn 安装

npm install sortablejs --save
or
yarn add sortablejs --save

2、bower 安装

bower install --save sortablejs

3、script 引入

<script src="../../js/Sortable.min.js"></script>

二、使用

1、首先要在项目中本地安装 sortablejs：

执行 ：npm install sortablejs --save
or 
yarn add sortablejs --save

2、然后在要实现表格拖拽的 .vue 文件中引入 sortablejs：

import Sortable from 'sortablejs'

3、基本排序功能 templete 里面的表格（el-table）不需要进行设置，只需要在 .vue 的 mounted 方法中进行 sortable 的初始化即可。

示例：

<template>
    <el-table :data="tableData">
        <el-table-column prop="..." label="..."></el-table-column>
    </el-table>
</template>

<script>
import Sortable from "sortablejs";

export default {
    data() {
        return {
            tableData: [...],
        };
    },
    mounted() {
        this.initSort();
    },
    methods: {
		initSort() {
	      const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
	      // const sortable = new Sortable(el, options);
	      // 根据具体需求配置options配置项
	      const sortable = new Sortable(el, {
	        onEnd: (evt) => { // 监听拖动结束事件
	          console.log(this) // this是当前vue上下文
	          console.log(evt.oldIndex) // 当前行的被拖拽前的顺序
	          console.log(evt.newIndex) // 当前行的被拖拽后的顺序
	          // 这里就可以写我们需要传给后台的逻辑代码
	          // 我们有了 evt.oldIndex 和 evt.newIndex 这两个参数做索引，我们可以根据绑定在表格上面的 data 这个 Array 找到两个相应的记录。就可以针对数据进行操作啦。
	          // 下面将拖拽后的顺序进行修改
	          const currRow = this.tableData.splice(evt.oldIndex, 1)[0]
	          this.tableData.splice(evt.newIndex, 0, currRow)
	          const newData = []
	          this.tableData.forEach((item, index) => {
	            newData[index] = {
	              id: item.id,
	              rank: index + 1
	            }
	          })
	          // 下面是将排序结果更新到数据库中，根据自己项目的逻辑进行实现即可。
	          const data = {
	            id: this.$route.params.id,
	            datas: {
	              streams: newData
	            }
	          }
	          this.$store
	            .dispatch('user/setMultiSort', data)
	            .then((res) => {
	              if (res.code === 200) {
	                this.$message.success('排序修改成功')
					// 修改成功后重新获取列表数据更新
	                this.getMultiLiveList()
	              } else {
	                this.$message.error('排序修改失败')
	              }
	            })
	            .catch((e) => {
	              console.log(e)
	            })
	        }
	      })
	    },
    },
};
</script>

上面内容配置完成，我们在页面中进行调试，鼠标可以拖动 table 一行移动到另一行上（下），就说明该功能实现了。

上面可以实现拖拽完成后更新数据库的结果，根据自己项目的实现方式进行开发即可轻松实现。

三、options 配置项以及事件方法

const sortable = new Sortable(el, options);

options 是 sortable 配置项，具体配置详情查看Sortable 配置文档

Sortable 的配置项、事件、事件方法、对象等内容官网介绍的很详细，有复杂的配置需求大家可以去官网查看哦。

四、总结

如果只是进行简单的拖拽需求，只需要看上面的示例demo就可以了，而且官网也提供了大量的demo，比如：多列表相互拖拽、克隆（通过拖拽复制节点）、禁止sorting、过滤等复杂效果，都可以看官网demo。

该需求配合使用该拖拽库还是很容易实现效果的。

如果在开发方面有什么问题，欢迎评论区留言讨论一起学习哦～

最后 不要忘记一键三连哦～

各位，加油！！！