当前位置: 首页 > news >正文

Vue中el-table表格的拖拽排序

el-table实现拖拽

element-ui 表格没有拖拽排序的功能,只能使用sortable.js插件实现拖拽排序,当然也可以应用到其他的组件里面,用法类似,这里只说表格。

实现步骤:

1、安装sortable.js

npm install sortablejs --save

2、在需要的页面中引入

import Sortable from 'sortablejs'

3、实现表格拖动代码

mounted () {// 阻止默认行为document.body.ondrop = function (event) {event.preventDefault();event.stopPropagation();}// 调用 table拖拽排序this.rowDrop()
}
methods: {// 行拖拽rowDrop () {let tbody = document.querySelector('.el-table__body-wrapper tbody')let _this = thisSortable.create(tbody, {// or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }group: {name: 'words',pull: true,put: true},animation: 150, // ms, number 单位:ms,定义排序动画的时间onAdd: function (evt) { // 拖拽时候添加有新的节点的时候发生该事件console.log('onAdd.foo:', [evt.item, evt.from])},onUpdate: function (evt) { // 拖拽更新节点位置发生该事件console.log('onUpdate.foo:', [evt.item, evt.from])},onRemove: function (evt) { // 删除拖拽节点的时候促发该事件console.log('onRemove.foo:', [evt.item, evt.from])},onStart: function (evt) { // 开始拖拽出发该函数console.log('onStart.foo:', [evt.item, evt.from])},onSort: function (evt) { // 发生排序发生该事件console.log('onUpdate.foo:', [evt.item, evt.from])},// 一般的业务就用onEnd结束拖拽就够了onEnd ({ newIndex, oldIndex }) { // 结束拖拽if(newIndex == oldIndex) return;let currRow = _this.tableData.splice(oldIndex, 1)[0]_this.tableData.splice(newIndex, 0, currRow)}})}
}
http://www.lryc.cn/news/151629.html

相关文章:

  • 配置环境变量的作用
  • Mysql的page,索引,Explain Type等基本常识
  • 【业务功能篇95】web中的重定向与转发
  • IP对讲终端SV-6005带一路2×15W或1*30W立体声做广播使用
  • ES6 新特性
  • grafana用lark发告警python3接口
  • Java 中数据结构HashSet的用法
  • vue3下的密码输入框(antdesignvue)
  • 鸿鹄企业工程项目管理系统 Spring Cloud+Spring Boot+前后端分离构建工程项目管理系统源代码
  • 【爬虫】5.5 Selenium 爬取Ajax网页数据
  • thinkphp6 入门(3)--获取GET、POST请求的参数值
  • JSON简介
  • [Java]_[初级]_[以SAX流的方式高效读取XML大文件]
  • Visual Studio中平台和配置的概念
  • 【vue2第八章】工程化开发和使用脚手架和文件结构
  • 建造者模式简介
  • 虚拟世界指南:从零开始,一步步教你安装、配置和使用VMware,镜像ISO文件!
  • 服务器卡顿怎么查找原因?
  • Pnpm,npm,yarn
  • Kubernetes技术--使用kubeadm快速部署一个K8s集群
  • LeetCode 45题:跳跃游戏
  • idea中设置指定图片为项目站标
  • 【【萌新的STM32学习-27--USART异步通信配置步骤】】
  • elementplus实现左侧菜单栏收缩与展开
  • VBA技术资料MF50:VBA_在Excel中突出显示前3个值
  • linux定时删除服务器日志
  • 网络地址转换技术NAT(第九课)
  • K8s 在创建pod时api-server是先找scheduler 还是controller-manager
  • 【笔记】常用 js 函数
  • 无涯教程-JavaScript - QUARTILE函数