首先说下项目需求，一个多层嵌套的表格，行可以进行拖拽排序，但不能跨主级去拖拽，下拉可以异步获取数据，考虑了很久，还是用最熟悉的vue+element来做，但是element没有拖拽排序的功能，所以在此基础上加入sortable.js去实现拖拽功能。后台返回的排序规则是 每个数据都带有3个属性 id next prev ，用这3个属性实时的去更新排序id表示这一条数据的idnext表示下一条数据的i
转载
2024-04-08 09:17:22
157阅读
同事给到我一个新的需求，其中包括一个上传的图片列表的顺序调整功能，还需要通过拖拽图片实现调序，简单实现这个功能，并做一个记录环境：Vue3 + element-ui，在组件el-upload中的多文件上传列表中实现，先上运行图，动图演示功能符合你的需求，你就接着往下看，不符合也节约你的时间直接上源码吧，先是上布局部分<el-upload
v-model:file-list="fi
转载
2024-10-31 08:16:14
83阅读
Element-UI 的 Table 组件很强大，但是我们的需求更强大...简单粗暴的来一发效果图：一、数据驱动传统的拖动效果，都是基于通过 mousedown、mousemove、mouseup 事件来修改删减 dom 节点但 Vue 是一个数据驱动的前端框架，开发时应尽量避免操作 dom而且 Element-UI 的 Table 组件封装得很严谨，直接操
转载
2024-06-14 17:42:42
1308阅读
我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。name: “”,
data() {
return {
tableDatas: [
{
id:1,
name: ‘可可’
},{
id:2,
name: ‘排序’
},{
id:3,
name: ‘陈慕’
},{
id:4,
name: ‘于海峰’
},{
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.login-header {
width: 100%;
text-align: center;
演示地址1. 先动态渲染表头，给每一个表头添加一个class=virtual 的画虚线的类名，同时给每个表头加上鼠标点击、拖动、抬起事件：mousedown->mousemove->mouseup.2. 点击时确定点击的哪个，拖动的时候确定拖动的方向，抬起的时候确定放在的位置。3. 改变数据实现拖动完成效果。<html lang="en">
<head>
转载
2024-06-11 19:41:09
769阅读
目录vue自定义指令 vue自定义指令Vue自定义指令和组件一样，分为全局注册和局部注册两种方式。 全局注册：//xxx:指令名称
//inserted:指令的钩子函数
Vue.directive('xxx', {
inserted: function (el) {
//指令属性
}
});局部注册：//xxx:指令名称
//inserted:指令的钩子函数
exp
转载
2024-06-01 04:17:41
293阅读
所有的事件回调函数都有两个参数：event和ui，浏览器自有event对象，和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象，通常是当前元素的克隆对象 ui.position - 表示相对当前对象，鼠标的坐标值对象{top,left} ui.offse
转载
2024-09-13 07:31:10
137阅读
部分数据来源：ChatGPT引言 当我们使用 Element-UI 的自定义拖拽列表时，有时候需要根据拖拽的字段位置，将数据组成不同的列表进行显示。这种情况下，我们可以通过一些简单的操作，来实现自定义拖拽列表中的分类展示。在本文中，我们将介绍如何使用 Element-UI 和第三方组件库 vuedragg
转载
2024-07-05 19:54:29
952阅读
VUE+H5跨组件元素拖拽并传递数据；拖拽结束自动计算布局；以及如何配合element的可拖拽tree使用1.vue+H5实现跨组件拖拽与数据传递思路：（1）可拖拽组件元素的dragstart事件中，将相关数据暂存在vuex； （2）可放置组件元素的drop事件中，接收vuex中暂存的数据； （3）清空vuex的暂存数据；2.vue+H5实现跨组件拖拽与数据传递实现；（1）可拖拽组件：<te
转载
2024-10-13 08:37:52
104阅读
表格效果vue+element 实现表格可配置，列排序，列搜索，单元格双击修改，单击行修改，键盘上下左右选中input，拖动改变列宽等功能 （持续更新中，欢迎大家提出宝贵意见）jst-table更新日志时间废除新增2020.02.12无新增specialevent(特殊事件)参数：disabledEdit(禁止所有edit模板不可编辑);详见attrConfig2020.01.10废除keyboa
转载
2024-04-08 22:15:02
531阅读
最近接到一个表格拖拽并改变排序的需求 那么首先需要实现表格拖拽一.引入第三方插件1.引入sortable.js的包: npm install sortable.js --save 2.或者npm i -S vuedraggable vuedraggable依赖 Sortable.js，所以下载了vuedraggable，我们便可以直接引入Sortable使用Sortable的特性。 vue
转载
2024-02-25 12:34:51
1202阅读
需求描述vue-element-admin开发过程中需要对el-table行进行排序（即每一行可以上下移动），然后将排序后的数据传给后台更新数据。该表格无分页。问题分析方法一：可以采用在每条数据中加两个上下移动的按钮，每次移动一行。该方法实现简单，不过要连续移动的时候需要多次调用接口，交互效果不太好。方法二：可以采用table的拖拽功能实现行的一次性拖拽。该方法可以实现拖拽后调用接口，任意移动多行
转载
2024-03-31 19:29:23
5850阅读
点赞
文章目录前言一、如何在 elementUI el-dialog 对话框添加拖拽操作？1. 首先我们将新建一个js文件 dialog.js 放在项目的对应位置，将下面代码复制到文件中；2. 其次我们要在 main.js 文件中引入该 js 文件；3. 在其他 vue 文件中使用可拖动的 el-dialog ；二、效果展示1.鼠标触摸对话框顶部时就会出现拖动的鼠标样式，按住鼠标就可以拖动对话框到窗口
转载
2024-03-28 09:13:34
981阅读
文章目录前言一、el-table1.el-table 的height属性2.el-table 表头及表身style样式调整3.el-table 使用二、el-row、el-col布局（layout）1.案例使用三、el-upload 拖拽上传1、el-upload 拖拽样式修改不了总结 前言最近做的vue+elementUI的前端项目需求，分享下遇到了一些关于饿了么组件样式调整的问题以及最终解决
转载
2024-03-21 09:36:56
2383阅读
<el-tree class="el-scrollbar"
id="fixtree"
:data="logTreeList"
@node-click="handleNodeClick"
@node-contextmenu="showMenu"
原创
2021-04-18 11:41:43
6430阅读
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8" /> <title>拖动</title> <style> #range { px; margin: 10px.
原创
2022-09-29 16:13:07
104阅读
一、使用 iframe 标签嵌套页面1、简单了解一下 （1）什么是 iframe？ iframe 标签会创建一个行内框架（包含另一个文档的内联框架）。 简单地理解：页面中嵌套另一个页面。（2）使用场景？ 有的项目需求，需要在当前页面中显示外部网页，比如访问csdn、查看接口文档等，此时就可以使用 iframe 标签，嵌套一个页面。 （3）简单使用一下 修改commo
转载
2024-05-04 10:55:39
96阅读
1. ·概述
2. Selectable插件允许用户对指定的元素进行选中的动作。此外还支持按住Ctrl键单击或拖拽选择多个元素。
3. 官方示例地址：http://jqueryui.com/demos/selectable/
4.
5.
6. ·参数（参数名 : 参数类型 : 默认值）
7. autoRefresh : Boolean : true
8.
转载
2024-07-30 16:04:53
288阅读
学习目录Vue.js 基础：在学习 ElementUI 之前，你需要先掌握 Vue.js 的基础知识，包括 Vue.js 的核心概念、指令、组件等。ElementUI 组件：ElementUI 包含很多常用的 UI 组件，如按钮、表单、表格、弹窗等，你需要针对每个组件进行深入的学习，了解组件的使用方法、属性、事件等。ElementUI 主题：ElementUI 可以自定义主题，你需要了解如何配置主
原创
2023-07-25 15:17:33
691阅读
