Element-ui el-table 使用 SortableJS 实现表格拖拽排序,并将排序结果更新至数据库使行顺序实现更改
前言
当我们使用 Element el-table
组件时,需要用到拖拽排序的需求时,虽然 el-table
自带支持按列排序,但是当我们自己拖拽进行排序时,现有组件是无法满足的。
这个时候我们就需要引入一个强大的js拖拽库:SortableJS
该拖拽库简单易上手,官网提供了我们常用的拖拽效果的demo,下面我主要记录一下如何在我们的项目中快速上手使用。
一、安装
安装方式分为三种:
1、npm 安装
npm install sortablejs --save 复制代码
2、bower 安装
bower install --save sortablejs 复制代码
3、script 引入
<script src="../../js/Sortable.min.js"></script> 复制代码
二、使用
1、首先要在项目中本地安装 sortablejs:
执行 :npm install 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。
该需求配合使用该拖拽库还是很容易实现效果的。
如果在开发方面有什么问题,欢迎评论区留言讨论一起学习哦~
欢迎一键三连哦~
各位,加油!!!
作者:前端小新
链接:https://juejin.cn/post/7007300572227305485