本文给大家介绍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 拖拽排序内容请搜索站长技术以前的文章或继续浏览下面的相关文章希望大家以后多多支持站长技术!
ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里...
本文实例讲述了正则表达式中的操作符及说明。分享给大家供大家参考,具体如下: ...
Greediness(贪婪型):最大匹配 X、X*、X+、X{n,} 是最大匹配。例如你要用 “....
1 . 目标 演示下图的git reset 各选项的效果。 2. Git Reset操作说明 图中说明:...
3月22日消息 外媒 Winfuture 报道,此前微软面向 Insider 预览用户公布了 Window...
橡皮擦一个逗趣的互联网高级网虫。 观前提醒本篇文章涉及知识点巨大建议先收藏再...
Go原生就支持连接数据库,所以在使用 Golang 开发时,当需要数据库交互时,即可...
这些日子一直在简书上使用markdown写作,已经渐渐的痴迷于这种简洁纯粹的写作方...
从另一台机器上复制过来的项目,由于两台机器的库目录不一致,导致了stdio.h等很...
2月23日消息 据外媒 Windows Latest 今日报道,借助 Windows 10 Sun Valley 更新...