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

实现简单的element-table的拖拽效果

第一步,先随便创建element表格

    <el-table ref="dragTable" :data="tableData" style="width: 100%" border fit highlight-current-row><el-table-column label="日期" width="180"><template slot-scope="{ row }"><span>{{ row.date }}</span></template></el-table-column><el-table-column label="姓名" width="180"><template slot-scope="{ row }"><span>{{ row.name }}</span></template></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="拖拽"><template><i style="cursor: pointer;" class="el-icon-setting"></i></template></el-table-column></el-table>

第二步,里面的数据源tableData直接复制饿了么上的

第三步,需要安装sortablejs库并且在头部引入

import Sortable from 'sortablejs'

第四步,通过ref获取table,这里给table的ref设置为dragTable

在这里插入图片描述

第五步,就是获取table然后设置它的一些属性,比如拖拽时的CSS,拖拽时的一些事件等,然后需要注意的是需要再生命周期函数mounted里调用这个方法,因为这个方法可以获取dom

  data() {return {sortable: null,};},mounted() {this.dragTable()},methods: {dragTable() {const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]this.sortable = Sortable.create(el, {onEnd: () => {alert('成功')}})}},

第六步,实现效果

在这里插入图片描述

http://www.lryc.cn/news/128176.html

相关文章:

  • Web网页浏览器远程访问jupyter notebook服务器【内网穿透】
  • 干翻Dubbo系列第十一篇:Dubbo常见协议与通信效率对比
  • 春秋云镜 CVE-2020-17530
  • 【java毕业设计】基于Spring Boot+Vue+mysql的论坛管理系统设计与实现(程序源码)-论坛管理系统
  • 华为在ospf area 0单区域的情况下结合pbr对数据包的来回路径进行控制
  • PyQt5登录界面跳转
  • git add 用法
  • 系统架构设计师---2018年下午试题1分析与解答(试题三)
  • 面试时如何回答接口测试怎么进行
  • 【LeetCode】647.回文子串
  • 【Git】SSH到底是什么
  • 当你出差在外时,怎样轻松访问远程访问企业局域网象过河ERP系统?
  • 机器学习与模型识别1:SVM(支持向量机)
  • 在CentOS7.9上安装最新版本Docker安装步骤
  • 基于 spring boot 的动漫信息管理系统【源码在文末】
  • vue项目根据word模版导出word文件
  • PHP 从 URL(链接) 字符串中获取参数
  • 第一百三十一天学习记录:数据结构与算法基础:栈和队列(下)(王卓教学视频)
  • 全球磁强计市场价值约为16.2亿美元,预测期内将以超过5.21%的增长率增长
  • WebGL游戏站优化实录【myshmup.com】
  • 6、Mysql免安装版本的配置与使用(2023-08)
  • docker之简介与安装
  • vue之动态表单(优化)
  • web连接桌面打开gptmap
  • 做好需求分析的4大关键认知
  • Max Compute 操作记录
  • Windows 11 + Ubuntu20.04 双系统 坑里爬起来
  • touch手势事件及功能封装
  • 面试问题记录
  • ZooKeeper的应用场景(集群管理、Master选举)