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

将 Element UI 表格拖动功能提取为公共方法

news 来源：原创 2025/7/25 18:52:45

为了在多个页面复用表格拖动功能，我们可以将其封装成以下两种形式的公共方法：

方案一：封装为 Vue 指令（推荐）

1. 创建指令文件 `src/directives/tableDrag.js`

import interact from 'interactjs';export default {inserted(el, binding) {const tableBody = el.querySelector('.el-table__body-wrapper');if (!tableBody) return;// 设置初始样式tableBody.style.cursor = 'grab';tableBody.style.userSelect = 'none';// 初始化交互interact(tableBody).draggable({modifiers: [interact.modifiers.restrictRect({restriction: 'parent'})],listeners: {start: () => {tableBody.style.cursor = 'grabbing';},move: (event) => {tableBody.scrollLeft -= event.dx * (binding.value?.damping || 1);},end: () => {tableBody.style.cursor = 'grab';}},inertia: binding.value?.inertia || true,autoScroll: binding.value?.autoScroll || true});},unbind(el) {const tableBody = el.querySelector('.el-table__body-wrapper');if (tableBody) {interact(tableBody).unset();}}
};

2. 全局注册指令 `src/main.js`

import tableDrag from '@/directives/tableDrag';Vue.directive('table-drag', tableDrag);

3. 在组件中使用

<template><el-tablev-table-drag="{ damping: 0.8, inertia: true }":data="tableData"style="width: max-content"border><!-- 表格列 --></el-table>
</template>

方案二：封装为混合 (Mixin)

1. 创建混入文件 `src/mixins/tableDrag.js`

import interact from 'interactjs';export default {methods: {initTableDrag(tableRef, options = {}) {const tableEl = this.$refs[tableRef]?.$el;if (!tableEl) return;const tableBody = tableEl.querySelector('.el-table__body-wrapper');if (!tableBody) return;// 设置样式tableBody.style.cursor = 'grab';tableBody.style.userSelect = 'none';// 初始化交互this.tableDragInteract = interact(tableBody).draggable({modifiers: [interact.modifiers.restrictRect({restriction: 'parent'})],listeners: {start: () => {tableBody.style.cursor = 'grabbing';},move: (event) => {tableBody.scrollLeft -= event.dx * (options.damping || 1);},end: () => {tableBody.style.cursor = 'grab';}},inertia: options.inertia !== false,autoScroll: options.autoScroll !== false});},destroyTableDrag(tableRef) {const tableEl = this.$refs[tableRef]?.$el;if (!tableEl) return;const tableBody = tableEl.querySelector('.el-table__body-wrapper');if (tableBody && this.tableDragInteract) {this.tableDragInteract.unset();}}},beforeDestroy() {if (this.tableDragInteract) {this.tableDragInteract.unset();}}
};

2. 在组件中使用

<template><el-tableref="myTable":data="tableData"style="width: max-content"border><!-- 表格列 --></el-table>
</template><script>
import tableDragMixin from '@/mixins/tableDrag';export default {mixins: [tableDragMixin],mounted() {this.initTableDrag('myTable', {damping: 0.7,inertia: true});}
};
</script>

方案三：封装为高阶组件

1. 创建高阶组件 `src/components/DraggableTable.vue`

<template><div class="table-container"><el-tableref="table"v-bind="$attrs"v-on="$listeners"style="width: max-content"><slot></slot></el-table></div>
</template><script>
import interact from 'interactjs';export default {name: 'DraggableTable',props: {damping: {type: Number,default: 1},inertia: {type: Boolean,default: true}},mounted() {this.initDrag();},beforeDestroy() {this.destroyDrag();},methods: {initDrag() {const tableBody = this.$refs.table?.$el.querySelector('.el-table__body-wrapper');if (!tableBody) return;tableBody.style.cursor = 'grab';tableBody.style.userSelect = 'none';this.interactInstance = interact(tableBody).draggable({modifiers: [interact.modifiers.restrictRect({restriction: 'parent'})],listeners: {start: () => {tableBody.style.cursor = 'grabbing';},move: (event) => {tableBody.scrollLeft -= event.dx * this.damping;},end: () => {tableBody.style.cursor = 'grab';}},inertia: this.inertia});},destroyDrag() {if (this.interactInstance) {this.interactInstance.unset();}}}
};
</script><style scoped>
.table-container {width: 100%;overflow: hidden;
}
</style>

2. 在组件中使用

<template><draggable-table:data="tableData":damping="0.8"border><el-table-column prop="date" label="日期" width="180"></el-table-column><!-- 其他列 --></draggable-table>
</template><script>
import DraggableTable from '@/components/DraggableTable';export default {components: {DraggableTable},data() {return {tableData: []}}
};
</script>

对比三种方案

方案	优点	缺点	适用场景
Vue 指令	使用简单，全局可用	配置选项较少	简单拖动需求
Mixin	灵活性高，可配置性强	需要在组件中调用方法	需要不同配置的多表格场景
高阶组件	封装彻底，使用最简洁	需要修改现有表格组件结构	新项目或可接受组件替换的场景

推荐按项目需求选择合适的方案，对于大多数项目，Vue 指令方案是最简单实用的选择。

将 Element UI 表格拖动功能提取为公共方法

为了在多个页面复用表格拖动功能，我们可以将其封装成以下两种形式的公共方法： 方案一：封装为 Vue 指令（推荐） 1. 创建指令文件 src/directives/tableDrag.js import interact from interactjs;export default {inse…...

编程日记 2025/7/25 18:52:45

项目中把webpack 打包改为vite 打包

项目痛点: 老vu e-cli1创建的项目,项目是ERP系统集成了很多很多管理,本地运行调试的时候,每次修改代码都需要等待3分钟左右的编译时间,严重影响开发效率. 解决方案: 采用vite构建项目工程方案执行第一步使用vite脚手架构件一个项目,然后把build文件自定义的编译逻辑般到…...

编程日记 2025/7/25 12:56:52

Vue3 Element Plus 中el-table-column索引使用问题

在 Element Plus 的 el-table 组件中，使用 scope.index 是不准确的。正确的索引属性应该是 scope.$index。你的代码需要调整为： vue 复制下载 <el-button type"primary" size"default" text click"onModifyClick(scope…...

编程日记 2025/7/26 15:27:50

盲盒一番赏小程序系统发展：创新玩法激发市场活力

盲盒一番赏小程序系统凭借其创新的玩法，在潮玩市场中脱颖而出，激发了市场的无限活力。它不仅保留了传统一番赏百分百中奖的特点，还结合线上平台的优势，开发出了更多新颖的玩法。例如，小程序系统设置了赏品回收功能。…...

编程日记 2025/7/26 15:14:17

MySQL故障排查

目录 MySQL 单示例故障排查故障现象一故障现象二故障现象三故障现象四故障现象五故障现象六故障现象七故障现象八 MySQL主从复制排查故障现象一故障现象二故障现象三 MySQL 优化硬件方面关于CPU 关于内存关于磁盘 MySQL配置文件核…...

编程日记 2025/7/26 15:15:20

微服务项目-＞在线oj系统(Java版 - 4)

相信自己,终会成功目录 B端用户管理 C端用户代码发送验证码: 验证验证码退出登录登录用户信息功能用户详情与用户编辑用户竞赛接口用户报名竞赛用户竞赛报名接口查询用户信息列表 ThreadLocalUtil Hutool工具库常用功能介绍 B端用户管理进行列表显示与…...

编程日记 2025/7/23 20:57:09

DDoS与CC攻击：谁才是服务器的终极威胁？

在网络安全领域，DDoS（分布式拒绝服务）与CC（Challenge Collapsar）攻击是两种最常见的拒绝服务攻击方式。它们的目标都是通过消耗服务器资源，导致服务不可用，但攻击方式、威胁程度和防御策略存在显…...

编程日记 2025/7/25 10:29:25

旧物回收小程序，一键解决旧物处理难题

在快节奏的现代生活中，我们常常会面临旧物处理的困扰。扔掉觉得可惜，留着又占空间，而且处理起来还十分麻烦。别担心，我们的旧物回收小程序来啦，只需一键，就能轻松解决你的旧物处理难题！ 这款小…...

编程日记 2025/7/24 23:42:09

utils.js let systemInfo null;export const getSystemInfo () > {if (!systemInfo) {systemInfo uni.getSystemInfoSync();// 补充安全区域默认值systemInfo.safeAreaInsets systemInfo.safeAreaInsets || {top: 0,bottom: 0,left: 0,right: 0};// 确保statusBarHei…...

编程日记 2025/7/25 20:12:16

小程序弹出层/抽屉封装（抖音小程序）

最近忙于开发抖音小程序，最想吐槽的就是，既没有适配的UI框架，百度上还找不到关于抖音小程序的案列，我真的很裂开啊，于是我通过大模型封装了一套代码效果如下介绍可以看到这个弹出层是支持关闭和标题显示的&#xf…...

编程日记 2025/7/23 12:11:07

map与set封装

封装map和set一般分为6步： 1.封装map与set 2.普通迭代器 3.const 迭代器 4.insert返回值处理 5.map operator【】 6.key不能修改的问题一.红黑树的改造 map与set的底层是通过红黑树来封装的，但是map与set的结点储存的值不一样，set只需要存…...

编程日记 2025/7/24 19:20:21

【C语言基础语法入门】通过简单实例快速掌握C语言核心概念

文章目录 1. Hello World：第一个C程序2. 变量与数据类型3. 运算符4. 控制结构4.1 if-else 条件判断4.2 for 循环4.3 while 循环 5. 函数6. 数组7. 指针8. 结构体总结 📣按照国际惯例，首先声明：本文只是我自己学习的理解&#xff0…...

编程日记 2025/7/22 17:32:45

Manus AI 突破多语言手写识别技术壁垒：创新架构、算法与应用解析

在人工智能领域，手写识别技术作为连接人类自然书写与数字世界的桥梁，一直备受关注。然而，多语言手写识别面临诸多技术挑战，如语言多样性、书写风格差异、数据稀缺性等。Manus AI 作为该领域的领军者，通过一系列创新技术…...

编程日记 2025/7/21 17:34:57

数字图像处理——图像压缩

背景图像压缩是一种减少图像文件大小的技术，旨在在保持视觉质量的同时降低存储和传输成本。随着数字图像的广泛应用，图像压缩在多个领域如互联网、移动通信、医学影像和卫星图像处理中变得至关重要。技术总览当下图像压缩JPEG几乎一统天下&#xff…...

编程日记 2025/7/23 22:18:28

SGLang和vllm比有什么优势？

环境： SGLang vllm 问题描述： SGLang和vllm比有什么优势？ 解决方案： SGLang和vLLM都是在大语言模型（LLM）推理和部署领域的开源项目或框架，它们各自有不同的设计目标和优势。下面我综合目前…...

编程日记 2025/7/24 8:33:49

BeanFactory和FactoryBean的区别

目录 1、Spring-core 2、控制反转（IoC） 2.1、定义 2.2、实现方式 1、BeanFactory 2、ApplicationContext 3、FactoryBean BeanFactory是容器，管理所有Bean(包括FactoryBean)，FactoryBean是被管理的Bean，只是它有…...

编程日记 2025/7/21 21:43:02

仓颉开发语言入门教程：搭建开发环境

仓颉开发语言作为华为为鸿蒙系统自研的开发语言，虽然才发布不久，但是它承担着极其重要的历史使命。作为鸿蒙开发者，掌握仓颉开发语言将成为不可或缺的技能，今天我们从零开始，为大家分享仓颉语言的开发教程，…...

编程日记 2025/7/25 23:15:14

火花生态【算力通】公测，助力全球闲置算力训练AI模型

近日,在数字化浪潮迅猛推进的大背景下,人工智能模型训练对算力的需求呈井喷式增长,而全球范围内大量算力资源却处于闲置状态,如何高效整合这些闲置算力,成为推动行业发展的关键命题。在此关键时刻,火花生态旗下的核心产品【算力通】(ComputePower)于 2025 年 5 月 10 日正式开启…...

编程日记 2025/7/23 20:38:22

OpenMV IDE 的图像接收缓冲区原理

OpenMV IDE 的图像接收缓冲区原理与嵌入式图像处理系统的数据流控制密切相关。以下是其核心工作原理的分步解析： 一、图像缓冲区架构 OpenMV 的整个图像处理流程基于双缓冲（Double Buffering）机制，主要分为以下层级&#xff1…...

编程日记 2025/7/21 18:10:50

如何在LVGL之外的线程更新UI内容

前言作为一个刚开始学习LVGL和嵌入式开发的新手，学会绘制一个界面之后，遇到了一个问题：在LVGL线程之外的线程，更新UI内容时，会导致程序崩溃。 1、问题分析首先，需要了解LVGL的基本工作原理。LVGL&#…...

编程日记 2025/7/24 19:30:52

实景VR展厅制作流程与众趣科技实景VR展厅应用

实景VR展厅制作是一种利用虚拟现实技术将现实世界中的展览空间数字化并在线上重现的技术。这种技术通过三维重建和扫描等手段，将线下展馆的场景、展品和信息以三维形式搬到云端数字空间，从而实现更加直观、立体的展示效果。在制作过程中，首…...

编程日记 2025/7/22 13:56:10

Regmap子系统之六轴传感器驱动-编写icm20607.c驱动

（一）在驱动中要操作很多芯片相关的寄存器，所以需要先新建一个icm20607.h的头文件，用来定义相关寄存器值。 #ifndef ICM20607_H #define ICM20607_H /*************************************************************** 文件名 : i…...

编程日记 2025/7/22 2:06:57

计算机网络-HTTP与HTTPS

文章目录计算机网络网络模型网络OSITCP/IP 应用层常用协议HTTP报文HTTP状态码HTTP请求类型HTTP握手过程HTTP连接HTTP断点续传HTTPSHTTPS握手过程计算机网络网络模型为了解决多种设备能够通过网络相互通信，解决网络互联兼容性问题。网络模型是计算机网络中用于…...

编程日记 2025/7/25 1:25:00

Text2SQL在Spark NLP中的实现与应用：将自然语言问题转换为SQL查询的技术解析

概述 SQL 仍然是当前行业中最受欢迎的技能之一免责声明：Spark NLP 中的 Text2SQL 注释器在 v3.x（2021 年 3 月）中已被弃用，不再使用。如果您想测试该模块，请使用 Spark NLP for Healthcare 的早期版本。自新千年伊…...

编程日记 2025/7/23 16:14:23

Ubuntu20.04下使用dpkg方式安装WPS后，将WPS改为中文界面方法

Ubuntu20.04下使用dpkg方式安装WPS后，将WPS改为中文界面方法说明方法说明 Ubuntu20.04下使用dpkg方式安装WPS后，打开WPS后，发现界面是英文的，如有需要可以按照下面的方法将其改为中文界面。方法 cd /opt/kingsoft/wps-offic…...

编程日记 2025/7/10 20:00:45

OpenCV CUDA 模块中的矩阵算术运算-----在频域（复数频谱）中执行逐元素乘法并缩放的函数mulAndScaleSpectrums()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 mulAndScaleSpectrums()是OpenCV CUDA模块中用于在频域（复数频谱）中执行逐元素乘法并缩放的函数。这个函数主要用于在…...

编程日记 2025/7/26 7:04:29

批量剪辑 + 矩阵分发 + 数字人分身源码搭建全技术解析，支持OEM

在互联网内容生态蓬勃发展的当下，企业与创作者对内容生产与传播效率的要求日益增长。批量剪辑、矩阵分发和数字人分身技术的融合，成为提升内容创作与运营效能的关键方案。从源码层面实现三者的搭建与整合，需要深入理解各功能技术原理&#xf…...

编程日记 2025/7/25 13:44:48

Spring Boot 与 RabbitMQ 的深度集成实践（三）

高级特性实现消息持久化在实际的生产环境中，消息的可靠性是至关重要的。消息持久化是确保 RabbitMQ 在发生故障或重启后，消息不会丢失的关键机制。它涉及到消息、队列和交换机的持久化配置。首先，配置队列持久化。在创建队列时&#xf…...

编程日记 2025/7/21 19:06:13

部署java项目

1.编写shell脚本部署服务 restart.sh #!/bin/bash # # start the user program # echo "-------------------- start jk service --------------------" LOG_DIR"/home/joy/usr/app/ers-log" LOG_FILE"$LOG_DIR/log_$(date "%Y%m%d").txt&…...

编程日记 2025/7/24 23:50:01

中国城市间交通驾车距离矩阵(2024)

中国城市间交通驾车距离矩阵(2024) 1852 数据简介中国城市中心的交通驾车距离，该数据为通过审图号GS(2024)0650的中国城市地图得其城市中心距离，再通过高德地图api计算得出其交通驾车最短距离矩阵，单位为KM，方便大家研究使用。…...

编程日记 2025/7/22 2:11:24

物联网数据湖架构

物联网海量数据湖分析架构（推荐实践） ┌──────────────┐ │ IoT设备端 │ └──────┬───────┘│（MQTT/HTTP）▼ ┌──────────────┐ │ EMQX等 │ 可选（也可…...

编程日记 2025/7/25 4:32:57

Python将Excel单元格某一范围生成—截图（进阶版—带样式+批量+多级表头）

目录专栏导读1、库的介绍2、库的安装3、核心代码4、通用版——带样式5、进阶版（可筛选+自动截图）多级表头版总结专栏导读 🌸 欢迎来到Python办公自动化专栏—Python处理办公问题，解放您的双手 🏳️‍🌈 博客主页：请点击——> 一晌小贪欢的博客主页求关注 👍 该…...

编程日记 2025/7/17 14:00:14

使用Python将 Excel 中的图表、形状和其他元素导出为图片

目录为什么将 Excel 中的图表、形状和其他元素导出为图片？ 工具与设置 Python 将 Excel 图表导出为图片将图表导出为图片将图表工作表导出为图片 Python 将 Excel 中的形状和其他元素导出为图片微软 Excel 是一个功能强大的数据分析和可视化工具&#xff…...

编程日记 2025/7/23 16:47:07

从编程助手到AI工程师：Trae插件Builder模式实战Excel合并工具开发

Trae插件下载链接：https://www.trae.com.cn/plugin 引言：AI编程工具的新纪元在软件开发领域，AI辅助编程正在经历一场革命性的变革。Trae插件（原MarsCode编程助手）最新推出的Builder模式，标志着AI编程工具…...

编程日记 2025/7/24 17:46:19

AI大模型从0到1记录学习numpy pandas day25

第 3 章 Pandas 3.1 什么是Pandas Pandas 是一个开源的数据分析和数据处理库，它是基于 Python 编程语言的。 Pandas 提供了易于使用的数据结构和数据分析工具，特别适用于处理结构化数据，如表格型数据（类似于Excel表格）…...

编程日记 2025/7/25 0:37:13

【云实验】Excel文件转存到RDS数据库

实验名称：Excel文件转存到RDS数据库说明：把Excel的数据通过数据管理服务DMS（Data Management Service）导入到RDS MySQL数据库中。流程：创建一个RDS for MySQL的实例，再创建数据库和账号，通过D…...

编程日记 2025/7/22 8:31:25

用Python实现数据库数据自动化导出PDF报告：从MySQL到个性化文档的全流程实践

本文将介绍如何使用Python构建一个自动化工具，实现从MySQL数据库提取员工数据，并为每位员工生成包含定制化表格的PDF报告。通过该方案，可显著提升数据导出效率，避免手动操作误差，同时支持灵活的格式定制。需求&#…...

编程日记 2025/7/25 7:05:19

深入理解 ZAB：ZooKeeper 原子广播协议的工作原理

目录 ZAB 协议：ZooKeeper 如何做到高可用和强一致？🔒ZAB 协议的核心目标 🎯ZAB 协议的关键概念 💡ZAB 协议的运行阶段 🎬阶段一：Leader 选举 (Leader Election) 🗳️阶段二&#xff…...

编程日记 2025/7/24 9:28:25

Javascript本地存储的方式有哪些？区别及应用场景？（含Deep Seek讲解）

JavaScript本地存储方式的区别与适用场景 1. Cookie 特点: Cookie是一种较早的本地存储技术，主要通过HTTP协议在客户端和服务器之间传递数据。它的大小通常被限制为4KB以内，并且每次HTTP请求都会携带Cookie信息。缺点: 数据量有限制（最多4K…...

编程日记 2025/7/20 15:19:25

二元Logistic回归

二元Logistic回归在机器学习领域，二元Logistic回归是一种非常经典的分类模型，广泛用于解决具有两类标签的分类问题。Logistic回归通过逻辑函数（Sigmoid函数）将预测结果映射到概率值，并进行分类。一、Logistic回归 …...

编程日记 2025/7/19 19:08:55

Android framework 问题记录

一、休眠唤醒，很快熄屏 1.1 问题描述机器休眠唤醒后，没有按照约定的熄屏timeout 进行熄屏，很快就熄屏（约2s~3s左右） 1.2 原因分析： 抓取相关log，打印休眠背光相关调用栈 //具体打印调用栈…...

编程日记 2025/7/23 11:03:00

企业网站架构部署与优化 --web技术与nginx网站环境部署

一、Web 基础本节将介绍Web 基础知识,包括域名的概念、DNS 原理、静态网页和动态网页的相关知识。 1、域名和DNS 1.1、域名的概念网络是基于TCP/IP 协议进行通信和连接的，每一台主机都有一个唯一的标识(固定的IP 地址),用以区别在网络上成千上万个用户和计算机。…...

编程日记 2025/7/11 5:26:39

Scala与Spark：原理、实践与技术全景详解

Scala与Spark：原理、实践与技术全景详解一、引言在大数据与分布式计算领域，Apache Spark 已成为事实标准的计算引擎，而 Scala 作为其主要开发语言，也逐渐成为数据工程师和后端开发者的必备技能。本文将系统梳理 Scala 语言基础…...

编程日记 2025/7/25 9:46:06

【聚类】层次聚类

层次聚类文章目录层次聚类1. 算法介绍2. 公式及原理3. 伪代码 1. 算法介绍背景与目标层次聚类（Hierarchical Clustering）是一类无需事先指定簇数的聚类方法，通过构造一棵“树状图”（dendrogram）来呈现数据的多层次…...

编程日记 2025/7/25 1:43:53

Windows环境安装LibreOffice实现word转pdf

前言：最近在工作中遇到了一个需求要实现word转pdf，本来我在上一个公司使用aspose.words工具使用的得心应手，都已经把功能点实现了，两句代码轻轻松松，但是被告知不能用商业版的东西，公司要求只能用开源的&am…...

编程日记 2025/7/20 7:04:31

【FAQ】HarmonyOS SDK 闭源开放能力 —Vision Kit (3)

1.问题描述： 通过CardRecognition识别身份证拍照拿到的照片地址，使用该方法获取不到图片文件，请问如何解决？ 解决方案： //卡证识别实现页，文件名为CardDemoPage，需被引入至入口页 import { …...

编程日记 2025/7/25 19:23:58

【聚类】K-means++

K-means 文章目录 K-means1. 算法介绍2. 公式及原理3. 伪代码 1. 算法介绍背景与目标 k-means 是 David Arthur 和 Sergei Vassilvitskii 于2007年提出的改进 k-means 初始化方法，其核心目标是： 在保证聚类质量的前提下，通过更合理地选择初始…...

编程日记 2025/7/23 14:59:20

Java实现PDF加水印功能：技术解析与实践指南

Java实现PDF加水印功能：技术解析与实践指南在当今数字化办公环境中，PDF文件因其跨平台兼容性和格式稳定性而被广泛应用。然而，为了保护文档的版权、标记文档状态（如“草稿”“机密”等）或增加文档的可追溯性&#xf…...

编程日记 2025/7/26 9:58:04

【C#】用 DevExpress 创建带“下拉子表”的参数表格视图

展示如何用 DevExpress 创建带“下拉子表”的参数表格视图。主表为参数行 ParamRow，子表为子项 ChildParam。一、创建模型类 public class ParamRow {public string Pn { get; set; }public string DisplayName { get; set; }public string Value { get; set; }…...

编程日记 2025/7/23 1:25:47

Go语言八股文之Mysql优化

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。非常期待和您一起在这个小…...

编程日记 2025/7/19 12:02:13

方案一：封装为 Vue 指令（推荐）

1. 创建指令文件 src/directives/tableDrag.js

2. 全局注册指令 src/main.js

3. 在组件中使用

方案二：封装为混合 (Mixin)

1. 创建混入文件 src/mixins/tableDrag.js

2. 在组件中使用

方案三：封装为高阶组件

1. 创建高阶组件 src/components/DraggableTable.vue

2. 在组件中使用

对比三种方案

相关文章：

1. 创建指令文件 `src/directives/tableDrag.js`

2. 全局注册指令 `src/main.js`

1. 创建混入文件 `src/mixins/tableDrag.js`

1. 创建高阶组件 `src/components/DraggableTable.vue`