vue 使用 sortable 实现 el-table 拖拽排序功能


Posted in Vue.js onDecember 26, 2020

本文给大家介绍vue 使用 sortable 实现 el-table 拖拽排序功能,具体内容如下所示:

npm 下载:

npm install sortablejs --save

引入:

import Sortable from "sortablejs";

代码:

<template>
 <div class="table">
 <el-table ref="dragTable" :data="tableData" border :row-class-name="tableRowClassName">
 <el-table-column prop="date" label="日期"></el-table-column>
 <el-table-column prop="name" label="姓名"></el-table-column>
 <el-table-column prop="address" label="地址"></el-table-column>
 <el-table-column label="操作">
 <template>
 <el-button class="move" type="text" size="small">拖 拽</el-button>
 </template>
 </el-table-column>
 </el-table>
 </div>
</template>
<script>
import Sortable from "sortablejs";
export default {
 data() {
 return {
 tableData: [
 {
 id: "1",
 name: "text_1",
 date: "1111-11-11",
 address: "测试_1",
 },
 {
 id: "2",
 name: "text_2_不可拖拽",
 date: "2222-22-22",
 address: "测试_2_不可拖拽",
 disabled: true,
 },
 {
 id: "3",
 name: "text_3",
 date: "3333-33-33",
 address: "测试_3",
 },
 {
 id: "4",
 name: "text_4",
 date: "4444-44-44",
 address: "测试_4",
 },
 {
 id: "5",
 name: "text_5",
 date: "5555-55-55",
 address: "测试_5",
 },
 ],
 };
 },
 methods: {
 // 创建sortable实例
 initSortable() {
 // 获取表格row的父节点
 const ele = this.$refs.dragTable.$el.querySelector(
 ".el-table__body > tbody"
 );
 // 创建拖拽实例
 let dragTable = Sortable.create(ele, {
 animation: 150, //动画
 handle: ".move", //指定拖拽目标,点击此目标才可拖拽元素(此例中设置操作按钮拖拽)
 filter: ".disabled", //指定不可拖动的类名(el-table中可通过row-class-name设置行的class)
 dragClass: "dragClass", //设置拖拽样式类名
 ghostClass: "ghostClass", //设置拖拽停靠样式类名
 chosenClass: "chosenClass", //设置选中样式类名
 // 开始拖动事件
 onStart: () => {
 console.log("开始拖动");
 },
 // 结束拖动事件
 onEnd: (e) => {
 console.log(
 "结束拖动",
 `拖动前索引${e.oldIndex}---拖动后索引${e.newIndex}`
 );
 },
 });
 },
 // 设置表格row的class
 tableRowClassName({ row }) {
 if (row.disabled) {
 return "disabled";
 }
 return "";
 },
 },
 mounted() {
 this.initSortable();
 },
};
</script>
<style lang='scss'>
// 拖拽
.dragClass {
 background: rgba($color: #41c21a, $alpha: 0.5) !important;
}
// 停靠
.ghostClass {
 background: rgba($color: #6cacf5, $alpha: 0.5) !important;
}
// 选择
.chosenClass:hover > td {
 background: rgba($color: #f56c6c, $alpha: 0.5) !important;
}
</style>

到此这篇关于vue 使用 sortable 实现 el-table 拖拽排序功能的文章就介绍到这了,更多相关vue实现 el-table 拖拽排序内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
vue使用element-ui按需引入
May 20 Vue.js
在vue项目中封装echarts的步骤
Dec 25 #Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 #Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 #Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 #Vue.js
vue使用require.context实现动态注册路由
Dec 25 #Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 #Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 #Vue.js
You might like
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
js中replace的用法总结
2013/12/27 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
浅谈jQuery中ajaxPrefilter的应用
2016/08/01 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
Python中实现常量(Const)功能
2015/01/28 Python
pandas重新生成索引的方法
2018/11/06 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
通信专业个人自我鉴定
2013/10/21 职场文书
晚会主持词开场白
2014/03/17 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
最感人的道歉情书
2015/05/12 职场文书
宾馆客房管理制度
2015/08/06 职场文书
队名及霸气口号大全
2015/12/25 职场文书
汉语拼音教学反思
2016/02/22 职场文书
CSS3实现指纹特效代码
2022/03/17 HTML / CSS