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

el-table支持行拖动

<template><div ref="sortable-wrapper"><slot /></div>
</template><script>
import sortable from 'sortablejs';export default {props: {handle: { // 拖动元素type: String,default: ''},data: { // 列表数据type: Array,default: () => ([])},},mounted() {this.initTableSortable();},methods: {initTableSortable() {const table = this.$children[0].$el.querySelector('.el-table__body-wrapper table tbody');sortable.create(table, {ghostClass: 'sortable-ghost',handle: this.handle,onStart: () => {this.$emit('drag');},onEnd: ({ newIndex, oldIndex }) => {const list = [...this.data];const targetRow = list.splice(oldIndex, 1)[0];list.splice(newIndex, 0, targetRow);this.$emit('drop', { targetRow, list });}});},}
};
</script>
http://www.lryc.cn/news/411535.html

相关文章:

  • git拉取项目并切换到某个tag
  • 数据结构之探索“堆”的奥秘
  • 光影漫游者:高科技球形场馆开启沉浸式体验新时代—轻空间
  • 面试题007:static修饰符可以修饰什么,static的重要规则
  • EasyTwin的动画系统已经到了next level?快来一探究竟!
  • 当业务开展遇到阻力,如何开展?
  • 萨科微半导体整流桥
  • STM32的GPIO输入输出方式设置示例
  • SQL插入、更新和删除数据
  • 如何将幻灯片中的图片背景设置为透明
  • 【雅思考试】-- Day2 - 单词
  • .\venv\Scripts\activate : 无法加载文件 E:\,因为在此系统上禁止运行脚本。
  • C++之explicit
  • 基于FPGA的以太网设计(4)----详解PHY的使用(以YT8531为例)
  • 机器学习之心一区级 | Matlab实现SMA-Transformer-LSTM多变量回归预测(黏菌算法优化)
  • idea导入项目根目录缺失解决方法
  • VMware虚拟机下ubuntu配置
  • 回调函数复习
  • 开源AI智能名片O2O商城微信小程序在顾客价值链优化中的应用与探索
  • idea-springboot后端所有@注释含义汇总-持续更新!
  • 七:C语言-数组
  • 【numpy】浮点数比较大小
  • ISC.AI 2024周鸿祎:发展安全大模型是安全迈向“自动驾驶”的必由之路
  • 并查集(未压缩未按秩合并)
  • 读书其实并没有那么大的作用
  • 微信小程序/vue将金额/数字转为千分位显示在页面上
  • 如何查看树莓派的 OS 和内核版本
  • php的mysql操作可实现简单登录功能
  • c#复制窗体Form方法
  • C:图案打印