栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 前沿技术 > 大数据 > 大数据系统

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

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 引入


二、使用

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 的初始化即可。

示例:



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

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

三、options 配置项以及事件方法
const sortable = new Sortable(el, options);

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

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

四、总结

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

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

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

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

各位,加油!!!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/731106.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号