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 24 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
el-table-column 内容不自动换行的解决方法
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
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
传智播客学习之java 反射
2009/11/22 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
一个有意思的鼠标点击文字特效jquery代码
2017/09/23 jQuery
使用微信SDK自定义分享的方法
2019/07/03 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
python实现人民币大写转换
2018/06/20 Python
Python中安装easy_install的方法
2018/11/18 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
应届毕业生求职信
2013/11/30 职场文书
园林施工员岗位职责
2013/12/11 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
毕业生求职信范文
2014/06/29 职场文书
公务员政审材料
2014/12/23 职场文书
新学期开学标语2015
2015/07/16 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
nginx静态资源的服务器配置方法
2022/07/07 Servers