iview 自定义指令实现Table左右横向拖拽
有时候表格内容会很多,需要横向滚动查看右边的内容,又不想到底部拖动滚动条,如果能直接在内容中拖动就好了,这个时候就可以用 vue 的自定义指令来实现了。
为了以后扩展指令方便,创建 directives.js 文件,在 js 文件中引入vue
import vue from 'vue';
然后就可以自定义指令
vue.directive('tableDrag', {
inserted: function() {
let el = document.getElementsByClassName('ivu-table-body')[0];
el.style.cursor = 'grab';
el.onmousedown = function() {
let gapX = event.clientX;
let startX = el.scrollLeft;
document.onmousemove = function(e) {
let x = e.clientX - gapX;
el.scrollLeft = startX - x;
return false;
};
document.onmouseup = function(e) {
document.onmousemove = null;
document.onmouseup = null;
};
};
}
});
之后就可以在 i-table 元素上使用这个指令了
<i-table v-tableDrag></i-table>
二、拖拽
iview 自定义指令实现Table左右横向拖拽的更多相关文章
- JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- jQuery内容横向拖拽滚动
如果有业务需求:使用横向滚动,而又不想用滚动条,可以使用横向拖拽滚动,主要是利用元素的scrollLeft特性: 废话不多说直接上代码: css: .box{ width:100%; height:3 ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- element-UI ,Table组件实现拖拽效果
拖拽效果,先放效果图,步骤放在后面~~ 一.引入三方插件 1.引入sortable.js的包: npm install sortable.js --save 2.或者npm i -S vuedragg ...
- jquery.dad.js实现table的垂直拖拽(并取到当前拖拽对象)
http://sc.chinaz.com/jiaoben/161202572210.htm 1.首先官网实例,实现的都是div为容器的元素拖拽,示例如下: 2.最近的项目,要实现tbody的每一行tr ...
- 【Android】HorizontalScrollView内子控件横向拖拽
前言 网上ListView上下拖动的例子有,效果也很好,但是项目要横着拖的,只要硬着头皮自己写(主要是没找到合适的),参考文章1修改而来,分享一下. 声明 欢迎转载,但请保留文章原始出处:) 博客园 ...
- css3 横向拖拽
css: .tab{ list-style-type: none; display:-webkit-box; display:-webkit-flex; ...
- 使用 vue3 的自定义指令给 element-plus 的 el-dialog 增加拖拽功能
element-plus 提供的 el-dialog 对话框功能非常强大,只是美中不足不能通过拖拽的方式改变位置,有点小遗憾,那么怎么办呢?我们可以通过 vue 的自定义指令来实现一个可以拖拽的对话框 ...
- vue中自定义指令的使用
原文地址 vue中除了内置的指令(v-show,v-model)还允许我们自定义指令 想要创建自定义指令,就要注册指令(以输入框获取焦点为例) 一.注册全局指令: // 注册一个全局自定义指令 `v- ...
- 基于Vue实现拖拽效果
参考地址:基于Vue实现拖拽效果 参考链接中讲的比较详细,我只使用了其中自定义指令的方法.整体代码如下: <template> <!-- 卡片 --> <div clas ...
随机推荐
- defineProperty和Proxy
Proxy JS标准内置对象 const p = new Proxy(target, handler) 创建一个对象的代理: let obj = { a: { b: { c: 1 } } } let ...
- 51电子-STC89C51开发板:回忆
全部内容,请点击: 51电子-STC89C51开发板:<目录> --------------------------- 正文开始 --------------------------- ...
- 《Makefile中变量的高级用法:变量的替换引用、变量的嵌套使用》
高级使用方法有两种:第一种是变量的替换引用,第二种是变量的嵌套引用. 第一种用法经常用到,第二种用法我们很少使用.我们应该尽量避免使用变量的嵌套引用,在必须使用时,嵌套的层数越少越好.因为这种方法表达 ...
- 树莓派 Zero W 安装 apache2 + php
※ 树莓派Zero W ,默认 hostname为 raspberrypi ,通过USB网络方式登陆时,修改hostname后,登录主机名要随之变化. ① ssh pi@raspberrypi 更新系 ...
- ES6-遍历器与for-of循环
一.认识Iterator对象(可遍历对象) console.log([1, 2]); console.log([1, 2][Symbol.iterator]);//ƒ ...
- M1 IntelliJ IDEA2022安装报错解决方法
下载地址:http://pan.jizhouyun.com/s/I3QJVzk3et 报错一:系统权限问题 报错示例: 1.XX已损坏,打不开:您应该将它移到废纸娄/已损坏 2.打不开:您应该推出磁盘 ...
- Win10家庭版找不到组策略gpedit.msc怎么办
Win10家庭版找不到组策略gpedit.msc怎么办 @echo off pushd "%~dp0" dir /b %systemroot%\Windows\servicing\ ...
- 赤菟V307与Matlab的串口通信
赤菟V307与Matlab的串口通信 赤菟V307(CH32V307)是一款RISC-V内核的MCU,搭载的是沁恒自研RISC-V内核青稞V4F,最高主频144MHz,支持单精度浮点运算(FPU). ...
- ssh 远程报错 Permission denied, please try again.(密码输入正确也无法登录)
登录KVM 查看sshd服务systemctl status sshd 报错显示error: cloud not get shadow information forXXX 问题原因: 服务器 ...
- easypoi多sheet导出
以前一直接触的是单sheet导出,这次的需求换成了多sheet导出,算是一个难点所以得记录一下 底层关键的代码就是: private static void defaultExport(List< ...