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

vue3+elementPlus穿梭框拖拽

news 来源：原创 2025/7/16 14:14:00

安装

npm install sortablejs --save

<template><div class="transfer" ref="transfer"><div><el-transfer v-model="inputForm" :data="data" :titles="titles"><template #default="{ option }"><div class="pannel-content"><span :draggable="!option.disabled" @dragstart="drag($event, option)">{{ option.label}}</span></div></template></el-transfer><el-button @click="submit">确定</el-button></div></div>
</template><script lang="ts" setup>
import { TransferDataItem } from 'element-plus';
import Sortable from 'sortablejs';
const props = withDefaults(defineProps<{data: TransferDataItem[],titles?: [string, string]
}>(), {data: () => [{key: '111',label: `选项一`,disabled: false,}, {key: '222',label: `选项二`,disabled: false,}, {key: '333',label: `选项三`,disabled: false,}, {key: '444',label: `选项四`,disabled: false,}],titles: () => ['单个拖拽待选', '已选列表']
})
const data = computed(() => props.data)
const titles = computed(() => props.titles)const inputForm = ref([] as any)
const draggingKey = ref(null as any)
const transfer = ref<HTMLDivElement | null>(null)
const drag = (ev: DragEvent, option: any) => {draggingKey.value = option.key
}
onMounted(() => {const leftPanel = transfer?.value?.getElementsByClassName("el-transfer-panel")[0].getElementsByClassName("el-transfer-panel__body")[0] as any;const rightPanel = transfer?.value?.getElementsByClassName("el-transfer-panel")[1].getElementsByClassName("el-transfer-panel__body")[0] as any;const leftEl = leftPanel?.getElementsByClassName("el-transfer-panel__list")[0]const rightEl = rightPanel?.getElementsByClassName("el-transfer-panel__list")[0]Sortable.create(rightEl, {onEnd: (evt: any) => {const { oldIndex, newIndex } = evt;const temp = inputForm.value[oldIndex]if (!temp || temp === 'undefined') return;// 解决右边最后一项从右边拖左边，有undefined的问题inputForm.value[oldIndex] = inputForm.value[newIndex]inputForm.value[newIndex] = temp}})Sortable.create(leftEl, {onEnd: (evt: any) => {const { oldIndex, newIndex } = evt;if (oldIndex === newIndex) return;const temp = data.value[oldIndex]if (!temp || (temp as any) === 'undefined') return;// 解决右边最后一项从右边拖左边，有undefined的问题data.value[oldIndex] = data.value[newIndex]data.value[newIndex] = temp}})leftPanel.ondragover = (ev: any) => {ev.preventDefault()}leftPanel.ondrop = (ev: any) => {ev.preventDefault();const index = inputForm.value.indexOf(draggingKey.value)if (index !== -1) {inputForm.value.splice(index, 1)}}rightPanel.ondragover = (ev: any) => {ev.preventDefault()}rightPanel.ondrop = (ev: any) => {ev.preventDefault();if (inputForm.value.indexOf(draggingKey.value) === -1) {inputForm.value.push(draggingKey.value)}}
})
function submit() {console.log(inputForm.value);}
</script>
<style scoped lang="scss">
:deep(.el-transfer__button) {width: 30px;
}
</style>

vue3+elementPlus穿梭框拖拽

安装 npm install sortablejs --save <template><div class"transfer" ref"transfer"><div><el-transfer v-model"inputForm" :data"data" :titles"titles"><template #default"{ option }…...

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

牛客周赛 Round 93题解（个人向A-E）

牛客周赛 Round 93题解（个人向A-E） 题目链接：https://ac.nowcoder.com/acm/contest/109904 a题签到题，直接按题意模拟即可 #include <bits/stdc.h> using namespace std; #define ll long long int main() {ios::sync_…...

编程日记 2025/7/13 1:34:32

MySQL高可用之ProxySQL + MGR 实现读写分离实战

部署MGR 1、MGR 前置介绍阿里云RDS集群方案用的就是MGR模式！ 1.1、什么是 MGR MGR（MySQL Group Replication）是MySQL 5.7.17版本诞生的，是MySQL自带的一个插件，可以灵活部署。保证数据一致性又可以自动切换&#x…...

编程日记 2025/7/14 5:24:02

React TS中如何化简DOM事件的定义

概要我们在做TS开发时候，总要面对各种类型的定义。React使用自己的Sythetic Event机制管理DOM事件，不同于原生的DOM事件定义，所以在TS中，事件的类型定义更加繁琐。本文提供一中简化定义的方法，在使用中&#xff0c…...

编程日记 2025/7/16 5:49:13

BigemapPro蒙版使用技巧：精准导出地图范围

在地图制图过程中，我们常常会遇到需要按照特定边界裁剪地图，或者对指定范围以外的地图进行模糊处理等情况，这时"添加蒙版"功能就非常实用。 BigemapPro的蒙版功能，可满足用户按自定义形状裁剪地图、控制区域外显示效果&…...

编程日记 2025/7/13 11:25:09

CesiumEarth v1.15 更新

更新： CesiumEarth 更新至1.15.0版本，包含浏览器在线版、Desktop Windows版本、Desktop 安卓版本界面优化： 项目列表已适配手机屏幕功能扩展模块更新 1、在底部工具栏区域，所有已生效（已勾选&#xff0…...

编程日记 2025/7/13 17:00:43

SOC-ESP32S3部分：2-2-VSCode进行编译烧录

飞书文档https://x509p6c8to.feishu.cn/wiki/CTzVw8p4LiaetykurbTciA42nBf?fromScenespaceOverview 无论是使用Window搭建IDF开发环境，还是使用Linux Ubuntu搭建IDF开发环境，我们都建议使用VSCode进行代码编写和编译，VSCode界面友好&#x…...

编程日记 2025/7/14 9:23:41

机器学习 day05

文章目录前言一、模型选择与调优1.交叉验证2.超参数搜索前言通过今天的学习，我掌握了机器学习中模型的选择与调优，包括交叉验证，超参数搜索的概念与基本用法。一、模型选择与调优模型的选择与调优有许多方法，这里主要介绍较…...

编程日记 2025/7/13 21:23:22

关于element-ui的table type=“expand“ 嵌套表格展开异常问题解决方案

也许是很久没用这个库了今天找这个问题还花了一会儿时间也是蛮简单的一个问题排查过程就不说了直接说结果吧记录一下发现问题展开第一列的时候表格没问题收起的时候莫名其妙多了一个展开的按钮代码咋一看没什么问题百思不解不得其解甚至怀疑row-key的问题检查了数…...

编程日记 2025/7/13 18:08:06

Pichome 开源网盘程序index.php 文件读取漏洞(CVE-2025-1743)

免责声明本文档所述漏洞详情及复现方法仅限用于合法授权的安全研究和学术教育用途。任何个人或组织不得利用本文内容从事未经许可的渗透测试、网络攻击或其他违法行为。使用者应确保其行为符合相关法律法规，并取得目标系统的明确授权。对于因不当使用本文信息而造成的任何直…...

编程日记 2025/7/15 6:08:22

[SpringBoot]Spring MVC(6.0)----图书管理系统（初）

图书管理系统需求: 1. 登录: 用户输入账号,密码完成登录功能. 2. 列表展示: 展示图书. 准备工作将前端代码复制到 static 目录下. 约定前后端交互接口两个功能: 用户登录和图书列表展示. 需求分析: 1. 用户登录 url : /user/login param : userName 和 password return …...

编程日记 2025/6/28 22:41:10

C语言:基础篇之常见概念

文章目录 1.C语言是什么？2.C语言的历史和辉煌3.编译器的选择VS20223.1 编译和链接3.2 编译器的对比3.3 VS2022 的优缺点 4.VS项目和源文件、头文件介绍5.第一个C语言程序6.main函数7.printf和库函数8.关键字介绍9.字符和ASCII编码10.字符串和\011.转义字符12.语句和…...

编程日记 2025/7/16 5:00:39

Ansible模块——管理100台Linux的最佳实践

使用 Ansible 管理 100 台 Linux 服务器时，推荐遵循以下最佳实践，以提升可维护性、可扩展性和安全性。以下内容结合实战经验进行总结，适用于中大型环境（如 100 台服务器）： 一、基础架构设计 1. 分组与分层…...

编程日记 2025/7/13 12:14:33

算法与数据结构：质数、互质判定和裴蜀定理

文章目录质数质数判定质数筛选质因数分解互质判定裴蜀定理质数首先回顾「质数」的定义：若一个正整数无法被除了 1 和它自身之外的任何自然数整除，则称该数为质数（或素数），否则称该正整数为合数。根据上述定义&…...

编程日记 2025/6/28 23:49:23

基于C#的Modbus通信协议全面解析与实现指南

目录 1. Modbus协议概述 1.1 Modbus网络结构 1.2 Modbus功能码 2. Modbus RTU模式实现 2.1 RTU模式特点 2.2 CRC-16校验算法 2.3 使用NModbus4库实现RTU通信 3. Modbus TCP/IP模式实现 3.1 TCP模式特点 3.2 MBAP报文头结构 3.3 使用NModbus实现TCP通信 3.4 原生TCP套…...

编程日记 2025/7/16 1:56:44

IVX：重构 AI 原生开发范式，让模型调用成为指尖艺术

一、AI 原生开发的技术跃迁：从黑箱集成到白盒重构在传统 AI 开发范式中，将 GPT-4o、Mediapipe 等模型集成到业务系统往往需要经历 "模型训练 - API 对接 - 前端适配" 的复杂流程。开发团队需同时掌握机器学习框架（如 TensorFlow&…...

编程日记 2025/7/15 14:43:32

源码分析之Leaflet中TileLayer

概述 TileLayer 是 Layer 的子类，继承自GridLayer基类，用于加载和显示瓦片地图。它提供了加载和显示瓦片地图的功能，支持自定义瓦片的 URL 格式和参数。源码分析源码实现 TileLayer的源码实现如下： export var TileLayer …...

编程日记 2025/7/16 4:52:44

Java虚拟机 - 程序计数器和虚拟机栈

运行时数据结构 Java运行时数据区程序计数器为什么需要程序计数器执行流程虚拟机栈虚拟机栈作用虚拟机栈核心结构运行机制 Java运行时数据区首先介绍Java运行时数据之前，我们要了解，对于计算机来说，内存是非常重要的资源，因为内…...

编程日记 2025/7/16 1:56:43

大语言模型 15 - Manus 超强智能体开源版本 OpenManus 案例与原理深入解析

写在前面 Manus 是由中国初创公司 Monica.im 于 2025 年 3 月推出的全球首款通用型 AI 智能体（AI Agent），旨在实现“知行合一”，即不仅具备强大的语言理解和推理能力，还能自主执行复杂任务，直接交付完整成…...

编程日记 2025/7/14 22:33:39

开源CMS系统中哪些常见的安全漏洞最需要注意？

在当今数字化时代，开源内容管理系统（CMS）因其灵活性和低成本广受欢迎。然而，开源CMS的安全漏洞也频频成为黑客攻击的突破口。本文将带大家全面了解下开源CMS中需要警惕的安全漏洞以及防护建议，以帮助开发者和管理员更好…...

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

文件包含靶场实现

文件包含漏洞（File Inclusion Vulnerability）是 Web 安全中常见的高危漏洞，主要分为本地文件包含（LFI） 和远程文件包含（RFI） 1、典型利用方式利用方式示例 Payload说明路径遍历?page../../…...

编程日记 2025/7/8 12:26:34

在 JavaScript 中正确使用 Elasticsearch，第二部分

作者：来自 Elastic Jeffrey Rengifo 回顾生产环境中的最佳实践，并讲解如何在无服务器环境中运行 Elasticsearch Node.js 客户端。想获得 Elastic 认证？查看下一期 Elasticsearch Engineer 培训的时间！ Elasticsearch 拥有大量新…...

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

DataLight（V1.7.12）版本更新发布

DataLight（V1.7.12）版本更新发布亲爱的 DataLight 用户们， DataLight 发布 V1.7.12 版本，此版本带来了新服务 DINKY 的支持，以及多项问题修复，进一步提升了平台的易用性和稳定性。一. 更新日志在此次…...

编程日记 2025/7/14 11:11:49

LeetCode-前缀和-和为K的子数组

LeetCode-前缀和-和为K的子数组 ✏️ 关于专栏：专栏用于记录 prepare for the coding test。文章目录 LeetCode-前缀和-和为K的子数组📝 和为K的子数组🎯题目描述🔍 输入输出示例🧩题目提示🧪前缀和❓什么…...

编程日记 2025/7/4 1:14:02

MySQL基础关键_014_MySQL 练习题

目录一、有以下表，请用一条 SQL 语句查询出每门课程都大于 80 分的学生二、综合题1（数据自行模拟） 1.查询身份证号为“440401430103082”的申请日期 2.查询同一个身份证号有两条及以上记录的身份证号码及记录个数 3.将身份证号码为“4…...

编程日记 2025/7/14 10:51:19

femap许可与云计算集成

随着云计算技术的迅猛发展，越来越多的企业开始将关键应用和服务迁移到云端，以享受其带来的弹性扩展、高效管理和成本优化等优势。Femap作为一款强大的电磁仿真工具，通过与云计算的集成，将为企业带来前所未有的许可管理和仿真分析体…...

编程日记 2025/6/28 22:01:59

uni-app项目从0-1基础架构搭建全流程

前情最近新接了一个全新项目，我负责从0开始搭建小程序，我选用的技术栈是uni-app技术栈，UI库选择的是uview-plus，CSS引入现在流行的tainlwindcss，实现CSS原子化书写，实现小程序分包，分包中实现…...

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

轻量级高性能推理引擎MNN 学习笔记 04.线性回归

1. 线性回归 MNN 官方给的iOS Demo中，输入是图片，输出是分类结果，相对来讲，略微有些复杂，我们现在用一个最简单的线性回归模型，来说明MNN的用法。该线性回归是yaxb （其中a2,b0.01&#xff09…...

编程日记 2025/7/12 22:44:42

使用 React PDF 构建 React.js PDF 查看器的指南

在本文中，我们将重点介绍在React.js中制作 PDF 查看器的最受欢迎的开源库。具体来说，我们将利用著名的开源库react-pdf的功能，指导您完成创建 React.js PDF 查看器的过程。通过本教程，您将在第一部分学习如何使用 React-PDF 在 …...

编程日记 2025/7/12 16:48:09

动力电池点焊机厂家：驱动新能源制造的精密力量|比斯特自动化

在新能源汽车、储能系统等产业蓬勃发展的背景下，动力电池点焊机作为电池模组生产的核心设备，正经历着技术迭代与市场需求的双重升级。这类厂家通过持续研发与创新，不仅满足了电池制造企业对焊接精度、效率与稳定性的严苛要求，更推…...

编程日记 2025/7/11 5:04:12

React的合成事件（SyntheticEventt）

文章目录前言前言 React的合成事件（SyntheticEvent）是React为了统一不同浏览器的事件处理行为而封装的一套跨浏览器事件系统。它与原生事件的主要区别如下： 1. 事件绑定方式 • 合成事件：使用驼峰命名法绑定事件（如…...

编程日记 2025/7/7 23:38:53

知识中台Top5：Baklib上榜推荐

Baklib知识中台优势在数字化转型浪潮中，Baklib凭借其知识中台的核心设计理念，构建了企业级知识管理的差异化竞争力。区别于传统文档管理系统，该平台通过四库体系（知识资源库、场景规则库、服务模型库、应用组件库）实…...

编程日记 2025/7/14 11:55:44

在Windows系统中使用C++与Orthanc交互：基于DICOMweb的医学影像应用开发

🧑 博主简介：CSDN博客专家、CSDN平台优质创作者，高级开发工程师，数学专业，10年以上C/C, C#, Java等多种编程语言开发经验，拥有高级工程师证书；擅长C/C、C#等开发语言，熟悉Java常用开…...

编程日记 2025/7/10 17:00:48

视频太大？用魔影工厂压缩并转MP4，画质不打折！

在日常生活中，我们常常需要将视频文件转换成不同的格式以适应各种设备或平台的播放需求。魔影工厂作为一款功能强大且操作简单的视频转换工具，深受用户喜爱。本文中简鹿办公将手把手教你如何使用魔影工厂将视频转换为MP4格式，并进行个性化设置…...

编程日记 2025/7/1 21:51:14

Wan2.1 通过首尾帧生成视频

Wan2.1 通过首尾帧生成视频 flyfish 使用 Wan2.1-FLF2V-14B-720P 模型，通过输入两张图像（起始帧和结束帧），生成一段连贯的视频。 First Last Frame-to-Video 即 “首末帧到视频” 技术 import numpy as np import torch import…...

编程日记 2025/7/16 10:58:43

宝塔+fastadmin：给项目添加定时任务

一、定时任务脚本编写 1. 使用 shebang 声明执行器 #!/usr/bin/env php 这是 Unix/Linux 系统中脚本文件的标准开头。表示这个脚本使用系统环境变量中的 php 来执行。2. 定义 ThinkPHP 入口路径并加载框架 define(APP_PATH, __DIR__ . /../../application/); require __DIR__…...

编程日记 2025/7/16 7:38:30

[自动化集成] 使用明道云上传附件并在Python后端处理Excel的完整流程

在企业日常自动化场景中，使用低代码平台如明道云搭建前端界面，结合自定义Python后端服务，实现灵活数据处理是一种高效的组合方式。本文将分享一个典型的集成用例：用户通过明道云上传文本和Excel附件，Python后端接收并解析这些信息，最终实现完整的数据处理闭环。项目背景…...

编程日记 2025/7/14 0:14:57

前端项目采用响式布局

要让整个前端项目采用响应式布局，可以从多个方面进行优化，以下是一些具体的建议和实现方法： 1. 使用 ElementPlus 的响应式特性 ElementPlus 组件库本身提供了一些响应式的能力，例如 el-col 组件可以用于创建响应式的网格布局。…...

编程日记 2025/7/7 22:39:19

【Unity】DOTween的常用函数解释

DOTween插件常用函数解释 1.DOTween.To（通用变化动画） 解释：将某一个值在一定的时间内变化到另一个值（通用的函数），可用于大部分的动画变化使用示例： using UnityEngine; using DG.Tweenin…...

编程日记 2025/7/11 1:12:24

飞桨paddle import fluid报错【已解决】

跟着飞桨的安装指南安装了paddle之后 pip install paddlepaddle有一个验证： import paddle.fluid as fluid fluid.install check.run check()报错情况如下，但是我在pip list中，确实看到了paddle安装上了我import paddle别的包&#xff0c…...

编程日记 2025/7/10 1:18:59

ELK简介和docker版安装

使用场景主要还是给开发人员“打捞日志”用的。 ELK 是由三个开源工具组成的套件（Elasticsearch、Logstash 和 Kibana），主要用于日志的收集、分析和可视化。以下是 ELK 常见的使用场景： 日志集中化管理收集来自多个服务器或服…...

编程日记 2025/7/10 5:05:52

DockerHub被封禁，怎么将镜像传到国内？一种简单合规的镜像同步到国内方案[最佳实践]

Docker将容器化技术普及，推动云计算向云原生的演进。Docker的核心创新技术之一是容器镜像，它是一种文件的打包方式，将应用程序运行的操作系统、库、运行环境等依赖全部打包一起。在其他任意环境，只要可以运行docker服务&#xff0…...

编程日记 2025/7/11 12:06:25

飞桨paddle ‘ParallelEnv‘ object has no attribute ‘_device_id‘【已解决】

书借上回，自从我反复重装paddle之后，我发现了，只要pip list中有库，但是代码报错，那就是飞桨没把代码更新完全，只能自己去改源代码我又遇到报错了： 根据报错信息，找到ParallelEnv报…...

编程日记 2025/7/2 3:53:11

网络安全面试题（一）

文章目录一、基础概念与模型‌1. 什么是通信协议？列举三种常见的网络通信模型？2. 解释OSI七层模型及各层功能3. TCP/IP四层模型与OSI模型的对应关系是什么？4. 五层协议体系结构与TCP/IP模型的区别?5. 什么是面向连接与非面向连接的服务&…...

编程日记 2025/7/16 12:17:55

问题背景给定一个长度为 n n n 的整数数组 n u m s nums nums 和一个二维数组 q u e r i e s queries queries，其中 q u e r i e s [ i ] [ l i , r i ] queries[i] [l_i, r_i] queries[i][li,ri]。对于每个查询 q u e r i e s [ i ] queries[i] quer…...

编程日记 2025/7/6 14:21:21

RK3588 ArmNN CPU/GPU ResNet50 FP32/FP16/INT8 推理测试

RK3588 ArmNN CPU/GPU ResNet50 FP32/FP16/INT8 推理测试 **背景与目标** 一.性能数据【INT8模型在CPU上推理的结果已经不对,暂未分析原因】二.操作步骤2.1 在x86-Linux上生成onnx模型,以及tflite量化模型(避免在RK3588上安装过多依赖)2.1.1 创建容器2.1.2 安装依赖2.1.3 下载推…...

编程日记 2025/7/13 5:46:03

力扣第5题：最长回文子串（动态规划）

小学生一枚，自学信奥中，没参加培训机构，所以命名不规范、代码不优美是在所难免的，欢迎指正。标签： 字符串、动态规划、中心扩散法语言： C 题目： 给你一个字符串s，找到s中最长的…...

编程日记 2025/7/16 1:42:44

HCIP实验五

一、实验拓扑图： 二、实验需求分析： 1. PreVal策略：要求确保R4通过R2到达192.168.10.0/24 ，需在R4上针对去往该网段路由配置PreVal策略，为经R2的路径赋予更高优先值，影响本地路由表选路。 2. AS Path策略…...

编程日记 2025/7/15 4:59:06

python Numpy-数组

目录 Numpy： 一、Ndarray 1 定义 2 数组的属性方法 2.1 数组的维度：np.ndarray.shape 2.2 元素的类型：np.ndarray.dtype 2.3 数组元素的个数：np.ndarray.size 2.4 转置 3 ndarray 所存储元素的数据类型 4 数组创建 4.1 a…...

编程日记 2025/7/10 3:56:15

数据库分库分表从理论到实战

1.分库分表基础理论 1.1 分库分表基本概念定义：分库分表是一种将单一数据库中的数据分散存储到多个数据库或表中的技术方案，其核心思想是通过"分而治之"的方式解决数据库性能瓶颈问题。分库：将表按业务或数据量拆分到不同数据库中…...

编程日记 2025/7/15 17:19:32

相关文章：