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-cli 创建模板项目
Nov 19 Vue.js
Vue router安装及使用方法解析
Dec 02 Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 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
德劲1103二次变频版的打磨
2021/03/02 无线电
PHP连接access数据库
2008/03/27 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
用cssText批量修改样式
2009/08/29 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
2014/08/07 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
Vue前端项目部署IIS的实现
2020/01/06 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
Python线程详解
2015/06/24 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
sealed修饰符是干什么的
2012/10/23 面试题
校园新闻广播稿
2014/01/10 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
实验室标语
2014/06/21 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
单位提档介绍信
2015/10/22 职场文书
python playwright 自动等待和断言详解
2021/11/27 Python