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 20 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
vue中data里面的数据相互使用方式
Jun 05 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的宝库目录--PEAR
2006/10/09 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
Yii全局函数用法示例
2017/01/22 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
详解python并发获取snmp信息及性能测试
2017/03/27 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
Python实现将照片变成卡通图片的方法【基于opencv】
2018/01/17 Python
使用Python读取大文件的方法
2018/02/11 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
英国现代绅士品牌:Hackett
2017/12/17 全球购物
捷克时尚网上商店:OTTO
2018/03/15 全球购物
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
this关键字的含义
2015/04/08 面试题
借款协议书范本
2014/04/22 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android