首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

(长文预警) 你还在烦工作中碰到拖拽问题?一个框架jiejue

特征 支持触摸设备和现代浏览器(包括IE9) 可以从一个列表拖动到另一个列表或在同一列内 支持拖动手柄和可选文本(比voidberghtml5sortable更好) 智能自动滚动 高级交换检测 流畅动画...--save 导入 // Default SortableJS import Sortable from 'sortablejs'; // Core SortableJS (without default...revertClone:boolean—在移动到另一个列表后,将克隆元素恢复到初始位置 dragUlKey() { const ulKey = document.getElementById('...默认情况下,此选项为true,这意味着Sortable在应该被隐藏时将从DOM中删除克隆元素 emptyInsertThreshold 选项 拖动时鼠标必须与一个可排序对象之间距离(以像素为单位...交换插件 该插件修改了Sortable行为,以允许项目彼此交换而不是进行排序。一旦开始拖动,用户就可以将其拖动到其他项目上,并且元素不会发生任何变化。但是,用户放置项目将与原始拖动项目交换 ?

7K10

根据公司业务需求我是如何封装组件

,就会显乏味枯燥,而且更关键是这样代码使得项目更难去维护。...sortablejs -S 在项目中我是使用sortablejs实现拖拽,以及使用elemnt-ui分页组件实现分页功能。...好吧,到这里实现了递归条件了。接下来就是完成每一行数据代码编写了。具体如何完成每一行数据代码编写我等后续再补充,接下来我们先来了接这个组件配置。...其属性是通过attr来配置。 ? 如果需要复选框可通过配置select,将改字段设置为true。通过配置attr来配置属性,当然如果传也可以,有默认值。那如何获取到每行勾选所对应值呢?...给每一个递归组件绑定一个ref属性,那么通过 new Sortable 实例实现同层级拖拽(这里同层级就是相同层级节点并且同个父节点可互)。

3.7K10
您找到你想要的搜索结果了吗?
是的
没有找到

商城项目-品牌新增

我们查看Vuetify官网,弹窗是如何实现: ?...默认[] single-line:是否单行文本显示,默认是false suffix:显示后缀 接下来,我们先添加两个字段:品牌名称、品牌首字母,校验规则暂时写: <v-form v-model=...这样选框,在Vuetify中并没有提供(它提供是基本下拉框)。因此我已经给大家编写了一个无限级联动下拉选框,能够满足我们需求。 ?...1.1.5.表单校验 1.1.5.1.校验规则 Vuetify表单校验,是通过rules属性来指定: ? 校验规则写法: ?...,来实现中间数据新增 1.2.3.Mapper 通用Mapper只能处理单,也就是Brand数据,因此我们手动编写一个方法及sql,实现中间新增: public interface BrandMapper

2.6K10

【工具】EXCEL十大搞笑操作排行榜

很多童鞋都是按上述操作一个个再点一遍还原,或者用格式 刷,找一个单元格这样刷一下,如果一不小心单元格有格式,还是会把格式刷过来。...把A1:A10选中,鼠标放在四周,按SHIFT键 动到B列与C列之间,出现竖I型虚线,放掉,该放手时就放手。...5.填充序列 如果想做一个排班,需要将2013-1-1到2013-12-31日期输入到EXCEL中,并且跳过周六周日。一个一个手动录入日期要抓狂 吧?...可以在A1输入 2013-1-1,然后点击【开始】选项卡,然后在【编辑】组中,找到【填充】,在出现下拉列表中选择【序列】,序列产生在列,类型选择日期,日期单位 为工作日,步长值为1,终止值为2013-...曾经看到有人在日期右边插入一列,用Year计算出年份,然后再插入一 列,用Month计算出月份,然后再一个个筛选,再进行汇总,当时我就震惊了,哎,不会透视起呀。

3.1K60

二维矩阵节点链式消除和自动补齐!消消乐类游戏可参考!

操作方法 点击选中开始节点,按住拖动到相邻节点,相邻节点添加至选择链中,沿着链往回,将会取消之前选择节点,松开手指以后,选择节点将会消失,节点上方节点将会自动掉落,上方自动随机生成新数字方块掉落...确定选择节点链,并记录,更新选中节点位置为,并回收; 2. 沿着 Y 轴正向纵向从左到右遍历(即时掉落反方向); 3. 若有空节点,则在最上方新填一个新方块; 4....若不是节点,遍历下一个节点,直到沿着 Y 轴遍历完成; 5. 沿着 X 轴遍历完成后,做自动掉落动画; 6....遍历方式类似,依次从 X 轴正向,按照 Y 轴遍历所有非节点,根据偏差量,计算运动距离和运动时间,动画播放以后,更新节点数组信息; 7....思路说明 由于还在做,没有完全开发完,代码随时可能会修改,所以本游戏后续文章中,尽量讲解思路,贴代码,以免看时候稀里糊涂,产生误解,等游戏完全做完以后,再放开代码,如果感兴趣,欢迎关注。

79810

Excel表格中最经典36个小技巧,全在这儿了

你会发现你多少行,就会插入多少个空行。这种插入方法比选取一定数量行再插入更加灵活。...技巧17、两列互换 在下面的中,选取C列,光标放在边线处,按shift同时按下鼠标左键不松,拖动到B列前面,当B列前出现虚线时,松开鼠标左键即完成互换。 放在边线 ? 按左键不松拖动到B列前 ?...技巧18、批量设置求和公式 选取包括黄色行列区域,按alt 和 = (按alt键不松再按等号)即可完成求和公式输入。 ? 技巧19、同时查看一个excel文件两个工作 视图 - 新建窗口 ?...技巧20:同时修改多个工作 按shift或ctrl键选取多个工作,然后在一个中输入内容或修改格式,所有选中都会同步输入或修改。这样就不必逐个修改了。...excel2003版工具菜单 - 保护 - 保护工作。excel2010版审阅选项卡 - 保护工作。 按上述步骤操作后,你试着修改黄色区域单元格:ok。

7.6K21

MySQL相关 – 死锁发生和避免

如果是,在并发访问比较高情况下,如果大量事务因无法立即获得所需锁而挂起,会占用大量计算机资源,造成严重性能问题,甚至跨数据库。...如果 Tony 客户对 Kelvin 总监说:你帮我洗头我怎么剪头?Kelvin 客户对 Tony 总监说:你帮我剪头我怎么洗头?这个就叫形成等待环路。...:从系统启动到现在等待最长一次所花时间; Innodb_row_lock_waits :从系统启动到现在总共等待次数。...如果一个事务长时间持有锁释放,可以 kill 事务对应线程 ID ,也就是 INNODB_TRX trx_mysql_thread_id,例如执行 kill 4,kill 7,kill 8。...死锁避免 在程序中,操作多张时,尽量以相同顺序来访问(避免形成等待环路); 批量操作单张数据时候,先对数据进行排序(避免形成等待环路); 申请足够级别的锁,如果要操作数据,就申请排它锁; 尽量使用索引访问数据

72120

一个案例入门tableau——NBA球队数据可视化实战解析

之后点击“工作1”,就进入到了下图所示工作界面。 ? 工作界面 3.2 工作界面介绍 简单介绍一下tableau工作界面。 最左侧「数据」栏下面有「维度」和「度量」两个区域。...5.2 实现过程 新建一个新工作,将「球队」至行上,由于这里需要在列上同时显示三个指标,结合前面的学习,我们需要使用度量名称。因此将度量名称放到筛选器里,选出需要三个变量。如下图。...然后将“胜率筛选”字段至筛选器,并勾选“真”。如果前面更改为0%,这里值只有“伪”,如果更改为50%,则会有“真”和“伪”。我们只关心为“真”,即胜率不小于参数值结果,因此勾选“真”。...改为浮动好处是可以“叠加”在现有工作表面,拖动到任意位置,并通过调整卡片形状使整体更加协调,比如我们可以放置在中间较为空白地方。如下图。 ?...只需要在象限图左侧,点击出现三角,选择“用作筛选器”,就可以将象限图设置为筛选器工作,另外两个工作设置为目标工作。 ?

7.4K11

MySQL死锁详解及检测和避免

如果是,在并发访问比较高情况下,如果大量事务因无法立即获得所需锁而挂起,会占用大量计算机资源,造成严重性能问题,甚至跨数据库。 线上怕不怕这个错?...如果Tony客户对Kelvin说:你帮我洗头我怎么剪头? Kelvin 客户对Tony说:你帮我剪头我怎么洗头?这个就叫形成等待环路。...实际上,发生死锁情况非常多,但是都满足以上3个条件。 这个也是锁是不会发生死锁原因,因为资源都是一次性获取。...:从系统启动到现在等待最长一次所花时间; lnnodb_row_lock_waits :从系统启动到现在总共等待次数。...如果一个事务长时间持有锁释放,可以kill事务对应线程ID,也就是INNODB_TRXtrx_mysql_thread_id,例如执行kill 4,kill 7, kill 8。

79820

如何完成EXcel表格制作,这5个技巧轻松搞定

作为办公室一族,都会经常用到EXcel来统计报表和数据,当遇到自己不会操作时,就要求助于别人,但这是很浪费时间和精力,今天呢就来给大家分享如何完成EXcel表格制作?...一、创建表格 打开EXcel表格,框选要创建表格行数和列数。...把鼠标移到第一个单元格(即 A1),按住左键,往右下角,到达第 12 行第 G 列放开左键,单击“开始”选项下“样式”上面的“套用表格格式”,选择一种表格样式,例如“表格样式淡浅色 19”,则弹出“...二、快速复制表格 复制 - 粘贴,99.9%的人都是这样复制一个。其实按Ctrl同时用鼠标拖动,比复制更快。按Ctrl+Alt不松,还可以把表格拖动到另一个工作中。...五、电话号码分段显示 这些就是给大家分享EXcel表格制作全部内容了,这也是很多人在职场中要学习内容,相信大家看完这篇文章之后能够有所收获,还在等什么,赶紧去试试吧,看看自己都学会了哪几个哦。

1.2K10

RPA与Excel(DataTable)

处理工作 插入新工作:Shift+F11或Alt+Shift+F1 移动到工作簿中下一张工作:Ctrl+PageDown 移动到工作簿中上一张工作:Ctrl+PageUp 选定当前工作和下一张工作...在工作内移动和滚动 向上、下、左或右移动一个单元格:箭头键 移动到当前数据区域边缘:Ctrl+箭头键 移动到行首:Home 移动到工作开头:Ctrl+Home 移动到工作最后一个单元格,位于数据中最右列最下行...以“结束”模式移动或滚动 打开或关闭“结束”模式:End 在一行或一列内以数据块为单位移动:End+箭头键 移动到工作最后一个单元格,在数据中所占用最右列最下一行中:End+Home 移动到当前行中最右边单元格...Shift+箭头键 将选定区域扩展到与活动单元格在同一列或同一行最后一个非单元格:Ctrl+Shift+箭头键 将选定区域扩展到行首:Shift+Home 将选定区域扩展到工作开始处:Ctrl+...将选定区域扩展到与活动单元格在同一列或同一行最后一个非单元格:End+Shift+箭头键 将选定区域扩展到工作最后一个使用单元格(右下角):End+Shift+Home 将选定区域扩展到当前行中最后一个单元格

5.7K20

基于Vue实现跨表格(单选、多选表格项,单表格限制)相互拖拽

每个表格左上角动态显示表格内的人数。另外,就上面的那个动图来看,如果有一个表格与其他表格样式布局统一怎么办?...我们往下面methods属性中找到,就是简单地对密码框中内容每次初始化(置)。 // 密码框置 watchPasswordView(val) { if (!...这个方法做了两个工作,一是定义一个开始拖拽时记录当前表格标识,二是将当前表格数据克隆到新数组中。...这个方法中做了两项工作,一是调用了useReduction方法,二是根据旧表格项是否有选择数据来调用不同方法。...$refs[arr[i].data].clearSelection(); // 将选中勾选框置 this[arr[i].sletData] = []; // 将选择数据置 } 接着,我们来看下

3.6K21

使用kellte(ETL工具)对数据抽取、迁移等操作(入门安装篇)

Kettle中有两种脚本文件,transformation和job,transformation完成针对数据基础转换,job则完成整个工作控制。...注意:在数据库链接过程中,可能会报某个数据库连接找不到异常。那是因为你没有对应数据库链接驱动,请下载对应驱动后,放入kettlelib文件夹。...4、简单数据插入\更新   (1)新建插入   在左边面板中选择“核心对象”,在核心对象里面选择“输入->输入”,用鼠标拖动到右边面板。...如图所示: 双击拖过来,可以编辑输入。  选择数据库连接和编辑sql语句,在这一步可以点击预览,查看自己是否连接正确。 (2)通过输出到。   ...在左边面板中选择核心对象、选择“输出->输出”如图所示: 编辑输出:   首先:输入连接输出。   选中表输入,按住shift键,输出。

1.8K20

shift键在Excel中,还有这10种变态玩法?

SHIFT键就是这样存在 001 选中连续表格 工作组是对多个工作同时进行操作有效手段,我们通常用Ctrl来选中要构成工作各个工作,对于连续工作,则可以通过Shift来快速选取。 ?...a,如果选中区域方向上下一个单元格为,则将选中区域扩展至该方向上下一个非单元格 b,如果该方向上全是单元格,则选中整行/整列 c,同时按不在一条直线上两个方向键,则已选择区域往这两个方向同时扩展...它有第一种方法区别在于: a,双击法依次双击相反方向上边线,原方向上扩展不会撤销,即两个方向上扩展同时生效,换句话说,双击法扩展是不可逆地向四个方向扩展 b,如遇单元格,双击边线会导致区域扩展至连续最后一个单元格所在行列...005 快速移动区域、行列 选中区域或行列,按住Shift,将鼠标移动至范围边缘,直到鼠标变成带箭头十字,拖动到想要移动到位置(目标区域边缘会亮色,列边框亮色表示移动到该边框之后列,行边框亮色表示移动到行边框之后行...手残党救星来了。。。点击对象,按住Shift,任意拖动都是平移,就是这么任性。 ? 008 关闭所有工作簿 年轻太冲动,一口气打开太多工作簿了,怎么办?

1.8K70

Kettle Spoon入门教程「建议收藏」

填写相应数据库信息,即可。 点击测试,连接成功。 2.2 新建转换——由DB到DB 需求:目前有两个数据库,DB1和DB2。将DB1中某一个数据,导入到DB2对应中。...1)拖动控件 在左侧“核心对象”下“输入”菜单中,找到“输入”,并将其拖动到右侧空白处。同理,将“输出”菜单中,找到“插入/更新”,至空白处。...2)编辑控件内容 “输入”控件: 选择或新建数据库连接,对应需求中DB1,将要查询sql语句贴上。...步骤与2.2类似,就不再详细描述了,只说下不同地方。需要两个控件为“Excel输入”、“输出”。...编辑“START”控件,如下图: 编辑“转换”,选择文件,如下图: 3、小结 工欲善其事必先利其器,学会使用工具,使工作更加高效。

5.2K20

【工具】一个投行工作十年MMExcel操作大全

>移动到当前数据区域边缘:CTRL+ 箭头键 移动到行首:HOME 移动到工作开头:CTRL+HOME 移动到工作最后一个单元格。...PAGE DOWN 移动到工作簿中前一个工作:CTRL+PAGE UP 移动到下一工作簿或窗口:CTRL+F6 或 CTRL+TAB 移动到前一工作簿或窗口:CTRL+SHIFT+F6 移动到已拆分工作簿中下一个窗格...移动到工作最后一个单元格....+SHIFT+*(星号) 将选定区域扩展一个单元格宽度:SHIFT+ 箭头键 选定区域扩展到单元格同行同列最后非单元格:CTRL+SHIFT+ 箭头键 将选定区域扩展到行首:SHIFT+HOME 将选定区域扩展到工作开始...+END 13>Excel快捷键之处于End模式时展开选中区域 打开或关闭 END 模式:END 将选定区域扩展到单元格同列同行最后非单元格:END, SHIFT+ 箭头键 将选定区域扩展到工作上包含数据最后一个单元格

3.6K40

ETL开发工具KETTLE使用教程「建议收藏」

大家好,又见面了,我是你们朋友全栈君。 Kettle建立数据库连接、使用kettle进行简单全量对比插入更新:kettle会自动对比用户设置对比字段,若目标不存在该字段,则新插入该条记录。...Kettle中有两种脚本文件,transformation和job,transformation完成针对数据基础转换,job则完成整个工作控制。...4、简单数据插入\更新   (1)新建插入   在左边面板中选择“核心对象”,在核心对象里面选择“输入->输入”,用鼠标拖动到右边面板。...如图所示:   双击拖过来,可以编辑输入。   选择数据库连接和编辑sql语句,在这一步可以点击预览,查看自己是否连接正确。   (2)通过插入\更新输出到。   ...在左边面板中选择核心对象、选择“输出->插入\更新”如图所示:   编辑插入更新:   首先:输入连接插入更新。     选中表输入,按住shift键,向插入更新。

1.5K10

1分钟快速生成可视化图:Tableau

,转至最新版本Tableau下载页面,滚动到页面最下方点击【下载文件】会自动跳转到下载。...打开Tableau,点击工作,可以看到以下界面: 1) 功能区-作图过程需要使用工具 2) 画布-展示图形看板 3) 页选项卡-可添加或删除多页与切换数据源 工作 仪表板不同页面 4) 筛选器...中含有的字段:订单编号、订日期、门店、产品ID、顾客、数量。...1) 获取数据 打开Tableau,从功能栏上找到“连接”,打开到文件中对应Excel文件 获取数据后,会显示Excel里所有的工作,选中需要表格 此时切换到工作1后,所选表格所有字段都会显示在左栏...2) 建立图表 先选中自己想要图表类型,将相应字段至行列中,就会出现在画布上 本案例我们想要分析不同时间销售情况,所以先选X轴(订单日期),再选Y轴(数量)。

1.2K00

1分钟快速生成可视化图:Tableau

,转至最新版本Tableau下载页面,滚动到页面最下方点击【下载文件】会自动跳转到下载。...打开Tableau,点击工作,可以看到以下界面: 1) 功能区-作图过程需要使用工具 2) 画布-展示图形看板 image.png 3) 页选项卡-可添加或删除多页与切换数据源 工作 仪表板不同页面...中含有的字段:订单编号、订日期、门店、产品ID、顾客、数量。...image.png 1) 获取数据 打开Tableau,从功能栏上找到“连接”,打开到文件中对应Excel文件 image.png 获取数据后,会显示Excel里所有的工作,选中需要表格...image.png 此时切换到工作1后,所选表格所有字段都会显示在左栏 image.png 2) 建立图表 先选中自己想要图表类型,将相应字段至行列中,就会出现在画布上 image.png

1.3K30
领券