vue2vue3 el-table实现整行拖拽排序功能(使用sortablejs插件)

news2024/11/14 23:46:11

1、此功能已集成到[TTable组件中]—Vue2TTable组件 、Vue3TTable组件

2、最终效果

在这里插入图片描述

3、安装sortablejs

npm install sortablejs --save

4、Vue2实现方式

<template>
 <el-table
      ref="el-table"
      :data="tableData"
      :class="{'cursor':isCopy,'row_sort':isRowSort,'highlightCurrentRow':highlightCurrentRow,'radioStyle':(table.firstColumn&&table.firstColumn.type==='radio'),'treeProps':isShowTreeStyle}"
      v-bind="$attrs"
      v-on="$listeners"
      :highlight-current-row="highlightCurrentRow"
      :border="table.border||isTableBorder"
      :span-method="spanMethod||objectSpanMethod"
      :cell-class-name="cellClassNameFuc"
      @sort-change="soltHandle"
      @row-click="rowClick"
      @cell-dblclick="cellDblclick"
    >
    ....
 	</el-table>
 </template>
 <script>
import Sortable from 'sortablejs'
 props: {
  	// table所需数据
    table: {
      type: Object,
      default: () => {
        return {}
      }
    },
 	// 是否开启行拖拽
    isRowSort: {
      type: Boolean,
      default: false
    }
    ...
},
data() {
    return {
      tableData: this.table?.data
    }
  },
  watch: {
    'table.data': {
      handler(val) {
        this.tableData = val
      },
      deep: true // 深度监听
    }
  },
mounted() {
    this.initSort()
  },
  methods: {
	    // 行拖拽
	    initSort() {
	      if (!this.isRowSort) return
	      const el = this.$refs['el-table'].$el.querySelector('.el-table__body-wrapper > table > tbody')
	      new Sortable(el, {
	        animation: 150, // 动画
	        onEnd: evt => {
	          const curRow = this.tableData.splice(evt.oldIndex, 1)[0]
	          this.tableData.splice(evt.newIndex, 0, curRow)
	          this.$emit('rowSort', this.tableData)
	        }
	      })
	    }
	}
</script>

5、Vue3实现方式

<template>
	<div class="t-table" ref="TTableBox">
	....
	 <el-table
      ref="TTable"
      :data="state.tableData"
      :class="{
        cursor: isCopy,
        row_sort: isRowSort,
        highlightCurrentRow: highlightCurrentRow,
        radioStyle: table.firstColumn && table.firstColumn.type === 'radio',
      }"
      v-bind="$attrs"
      size="default"
      :highlight-current-row="highlightCurrentRow"
      :border="table.border || isTableBorder"
      @cell-dblclick="cellDblclick"
      @row-click="rowClick"
      :cell-class-name="cellClassNameFuc"
    >
    ....
	</el-table>
  </div>
</template>
<script setup lang="ts">
import { computed, ref, watch, useSlots, reactive, onMounted } from 'vue'
import Sortable from 'sortablejs'
const props = defineProps({
 // table所需数据
  table: {
    type: Object,
    default: () => {
      return {}
    },
    required: true,
  },
   // 表头数据
  columns: {
    type: Array,
    default: () => {
      return []
    },
    // required: true
  },
   // 是否开启行拖拽
  isRowSort: {
    type: Boolean,
    default: false,
  }
  ...
})
// 初始化数据
const state = reactive({
  tableData: props.table.data,
  ...
})
// 获取el-table ref
const TTable: any = ref<HTMLElement | null>(null)
// 获取t-table ref
const TTableBox: any = ref<HTMLElement | null>(null)
// 抛出事件
const emits = defineEmits([
  'rowSort',
   ....
])
watch(
  () => props.table.data,
  (val) => {
    // console.log(111, val)
    state.tableData = val
  },
  { deep: true }
)
onMounted(() => {
  initSort()
})
// 行拖拽
const initSort = () => {
  if (!props.isRowSort) return
  const el = TTableBox.value.querySelector('.el-table__body-wrapper tbody')
  // console.log('3333', el)
  Sortable.create(el, {
    animation: 150, // 动画
    onEnd: (evt) => {
      const curRow = state.tableData.splice(evt.oldIndex, 1)[0]
      state.tableData.splice(evt.newIndex, 0, curRow)
      emits('rowSort', state.tableData)
    },
  })
}
</script>

注意事项,el-table需要配置row-key且保持唯一性,不然会出现排序不对的情况

6、sortablejs其他options配置

7、组件地址

Vue3组件地址

Vue2组件地址

8、相关文章

Vue2基于ElementUi再次封装基础组件文档

vue3+ts基于Element-plus再次封装基础组件文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/624039.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

探究JavaScript:Array方法、原型链继承和JSON

目录 Array对象 构造函数 静态方法 Array.isArray() 实例方法 valueOf&#xff08;&#xff09; toString&#xff08;&#xff09; 对象的继承 构造函数的缺点 prototype属性作用 原型链 读取对象的某个属性的过程&#xff1a; constructor属性 instanceof运算符…

Linux防火墙学习笔记5

iptables规则匹配及动作&#xff1a; 规则&#xff1a;根据规定的匹配条件来尝试匹配每个流经此处的数据包&#xff0c;匹配成功&#xff0c;则由规则指定的处理动作进行处理。规则是由匹配条件和动作组成的。 iptables的规则匹配条件分类&#xff1a; 基本匹配条件&#xff…

STM32 EC200N-CN MQTT链接服务器开发实录

开发环境 硬件&#xff1a;STM32F091CBT6 、EC200N-CN模块板 、USB-TTL串口助手 软件&#xff1a;VS CODE 、 STM32CUBEMX、IAR 8.32 1.硬件设计 连接好EC200N-CN模块和单片机主板。 EC200N-CN模块设计时注意供电和IO电平转换。 EC200N-CN是低功耗的&#xff0c;其主串口…

宝藏达人 | 10年运营支招,一文看懂运营全套技能!

本期介绍的ProcessOn宝藏达人是爱吃小麦馒头&#xff0c;他在互联网领域担任运营官十年以上&#xff0c;有着丰富的业务实操经验和运营方法论。职场风雨历练中他接触过一些“会省钱”的老板&#xff0c;发现有的企业对运营这一职业并未足够重视&#xff0c;随便调个HR做运营经理…

linux中系统性能监测命令sar,查看cpu、内存、磁盘、网络等使用情况

显示系统CPU利用率的统计信息&#xff1a; sar -u 1 5 -u: 这是sar命令的选项之一&#xff0c;表示要显示CPU利用率相关的统计数据。1: 这是指定采样间隔的参数&#xff0c;表示每秒采样一次数据。5: 这是指定采样次数的参数&#xff0c;表示总共采样5次数据。 %user&#xf…

18.5:给定一个栈,请逆序这个栈,不能申请额外的数据结构,只能使用递归函数

给定一个栈&#xff0c;请逆序这个栈&#xff0c;不能申请额外的数据结构&#xff0c;只能使用递归函数 package algorithmbasic.class18;import java.util.Stack;//给定一个栈&#xff0c;请逆序这个栈&#xff0c;不能申请额外的数据结构&#xff0c;只能使用递归函数 publi…

网络安全为什么缺人? 缺什么样的人?

1.网络安全为什么缺人? 缺人的原因是有了新的需求。 以前的时候&#xff0c;所有企业是以产品为核心的&#xff0c;管你有啥漏洞&#xff0c;管你用户信息泄露不泄露&#xff0c;我只要做出来的产品火爆就行。 这一切随着《网络安全法》、《数据安全法》、《网络安全审查办法…

gaussdb的日期函数加减操作

日期加一天&#xff0c;四种写法&#xff0c;减一天换成减法- SELECT now() integer 1 SELECT date 2023-06-08 integer 1 SELECT timestamp 2023-06-08 integer 1 select 2023-06-08 ::date interval 1 day 日期加减一周&#xff0c; select 2023-06-08 ::date …

influxDB 1.8 笔记(更新中)

1、InfluxDB基本数据结构 数据结构含义database数据库measurement数据库中的表retention policy保存策略&#xff1a;让InfluxDB能够知道可以丢弃哪些数据&#xff0c;设置数据自动清除时间&#xff0c;从而更高效的处理数据points表里面的一行数据 points的数据结构 数据结…

Android实例——2048游戏

2048游戏 项目简介ConfigConstantsGameActivityGameItemGameViewMainActivityScreenUtils布局activity_game.xmlactivity_main.xml 项目简介 选择难度&#xff0c;生成随机数字&#xff0c;通关上下左右滑动&#xff0c;合并相同的数字&#xff0c;直到达到目标数字即可通关游…

MAC环境编译Android环境下的FFmpeg6.0版本

文章目录 一. 下载FFmpeg源码二、对FFmpeg进行安装编译三、进行JNI接口编写代码四、在Android 项目中调用.so库五、FFmpeg的代码学习技巧1、整体学习步骤2、FFmpeg的代码学习步骤 六、参考链接: 一. 下载FFmpeg源码 该项目是基于FFmpeg6.0环境编写。文中涉及代码在不同版本可能…

配置MySQL保存Hive元数据

Hive默认使用自带&#xff08;内嵌&#xff09;的Derby进行元数据存储&#xff0c;这个就意味着无法实现多个hive shell并发连接Hive。如果需要支持多用户登录Hive&#xff0c;必须配置一个独立的数据库。上一节我们已经将MySQL数据库安装到Linux上&#xff0c;本节我们将讲解一…

微服务架构基础--第1章认识微服务架构

第1章认识微服务架构 一.预习笔记 1.为什么需要微服务架构 传统的单体应用架构都是模块化的设计逻辑&#xff0c;易于开发和调试&#xff0c;也易于部署。但是随着用户量的增加&#xff0c;就无法满足系统的负载&#xff0c;虽然也可以进行单体架构的拓展&#xff0c;但是随着…

设备指纹系列--基础篇

基础概念 618还没开始&#xff0c;但是又好像已经结束了…在这种电商大促的大节日前&#xff0c;电商行业客户一般会提前找到合适的设备指纹产品&#xff0c;去防止被“薅秃”。因为&#xff0c;黑灰产拥有专业的设备牧场&#xff0c;通过使用模拟器、刷机改机等手段&#xff…

算法与数据结构-数组

文章目录 什么是数组线性表连续的内存空间和相同类型的数据 为什么数组的插入和删除是低效的插入删除 容器与数组的区别 什么是数组 数组&#xff08;Array&#xff09;是一种线性表数据结构。它用一组连续的内存空间&#xff0c;来存储一组具有相同类型的数据。 这个定义里有几…

Pytest自动化测试框架生成allure的报告

一、前言 最近通过群友了解到了allure这个报告&#xff0c;开始还不以为然&#xff0c;但还是逃不过真香定律。 经过试用之后&#xff0c;发现这个报告真的很好&#xff0c;很适合自动化测试结果的展示。下面说说我的探索历程吧。 选用的项目为Selenium自动化测试Pytest框架实…

IntelliJ IDEA彻底删除

我们在用idea的时候&#xff0c;idea的环境出现了莫名其妙的问题&#xff0c;怎么也找不到问题原因的时候可以试着把idea卸载重新安装。但是如果你卸载的时候没有删除干净注册表里的信息。就算再次安装回来也还是解决不了问题。 如何删除干净IDEA 将所有jetbrains软件关闭退出…

嵌入式软件工程师招聘

当您招聘嵌入式软件工程师时&#xff0c;以下是一些建议和关键要点&#xff0c;可以帮助您吸引和筛选合适的候选人&#xff1a; 职位描述&#xff1a;清晰地定义嵌入式软件工程师的职责和要求。包括对硬件和软件开发经验的要求、熟练掌握的编程语言&#xff08;如C、C、Python等…

一文学会MoveIt Setup Assistant搭建moveit2机械臂模型

文章目录 前言一、MoveIt Setup Assistant 是什么&#xff1f;二、搭建步骤拉取相关repo创建项目文档编辑moveit_description文件夹编辑moveit_config文件夹 MoveIt Setup Assistant 配置Launch moveit_setup_assistant配置干涉关系配置planning groups配置ros2 controller配置…

一个 TCP 连接可以发送多少个 HTTP 请求

第一个问题 第二个问题 第三个问题 第四个问题 第五个问题 曾经有这么一道面试题&#xff1a;从 URL 在浏览器被被输入到页面展现的过程中发生了什么&#xff1f; 相信大多数准备过的同学都能回答出来&#xff0c;但是如果继续问&#xff1a;收到的 HTML 如果包含几十个图…