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 相关文章推荐
vuex的数据渲染与修改浅析
Nov 26 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue项目配置sass及引入外部scss文件
Apr 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
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
理解Javascript闭包
2013/11/01 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
jquery实现的导航固定效果
2014/04/28 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
Python3多线程爬虫实例讲解代码
2018/01/05 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
PyCharm代码格式调整方法
2018/05/23 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
搭建python django虚拟环境完整步骤详解
2019/07/08 Python
django中使用POST方法获取POST数据
2019/08/20 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
python基于socket函数实现端口扫描
2020/05/28 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
汽车运用工程毕业生自荐信
2013/10/29 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
员工晚婚的请假条
2014/02/08 职场文书
庆国庆活动总结
2014/08/28 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
个人求职信格式范文
2015/03/20 职场文书
采购员工作总结范文
2015/08/12 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
解除租赁合同协议书
2016/03/21 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA