有时候表格内容会很多，需要横向滚动查看右边的内容，又不想到底部拖动滚动条，如果能直接在内容中拖动就好了，这个时候就可以用 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;
};
};
}
});

在 main.js 中引入 js 文件

之后就可以在 i-table 元素上使用这个指令了

<i-table v-tableDrag></i-table>

二、拖拽
<template>
    <Table :columns="columns8" :data="data7" size="small" ref="table" v-tableDrag :draggable="true"
    @on-drag-drop="onDragDrop"></Table></template>
<script>
    export default {
        data () {
            return {
                columns8: [
                    {
                        "title": "名称",
                        "key": "name",
                        "fixed": "left",
                        "width": 200
                    },
                    {
                        "title": "展示",
                        "key": "show",
                        "width": 150,
                        "sortable": true,
                        filters: [
                            {
                                label: '大于4000',
                                value: 1
                            },
                            {
                                label: '小于4000',
                                value: 2
                            }
                        ],
                        filterMultiple: false,
                        filterMethod (value, row) {
                            if (value === 1) {
                                return row.show > 4000;
                            } else if (value === 2) {
                                return row.show < 4000;
                            }
                        }
                    },
                    {
                        "title": "唤醒",
                        "key": "weak",
                        "width": 150,
                        "sortable": true
                    },
                    {
                        "title": "登录",
                        "key": "signin",
                        "width": 150,
                        "sortable": true
                    },
                    {
                        "title": "点击",
                        "key": "click",
                        "width": 150,
                        "sortable": true
                    },
                    {
                        "title": "激活",
                        "key": "active",
                        "width": 150,
                        "sortable": true
                    },
                    {
                        "title": "7日留存",
                        "key": "day7",
                        "width": 150,
                        "sortable": true
                    },
                    {
                        "title": "30日留存",
                        "key": "day30",
                        "width": 150,
                        "sortable": true
                    },
                    {
                        "title": "次日留存",
                        "key": "tomorrow",
                        "width": 150,
                        "sortable": true
                    },
                    {
                        "title": "日活跃",
                        "key": "day",
                        "width": 150,
                        "sortable": true
                    },
                    {
                        "title": "周活跃",
                        "key": "week",
                        "width": 150,
                        "sortable": true
                    },
                    {
                        "title": "月活跃",
                        "key": "month",
                        "width": 150,
                        "sortable": true
                    }
                ],
                data7: [
                    {
                        "name": "推广名称1",
                        "fav": 0,
                        "show": 7302,
                        "weak": 5627,
                        "signin": 1563,
                        "click": 4254,
                        "active": 1438,
                        "day7": 274,
                        "day30": 285,
                        "tomorrow": 1727,
                        "day": 558,
                        "week": 4440,
                        "month": 5610
                    },
                    {
                        "name": "推广名称2",
                        "fav": 0,
                        "show": 4720,
                        "weak": 4086,
                        "signin": 3792,
                        "click": 8690,
                        "active": 8470,
                        "day7": 8172,
                        "day30": 5197,
                        "tomorrow": 1684,
                        "day": 2593,
                        "week": 2507,
                        "month": 1537
                    },
                    {
                        "name": "推广名称3",
                        "fav": 0,
                        "show": 7181,
                        "weak": 8007,
                        "signin": 8477,
                        "click": 1879,
                        "active": 16,
                        "day7": 2249,
                        "day30": 3450,
                        "tomorrow": 377,
                        "day": 1561,
                        "week": 3219,
                        "month": 1588
                    },
                    {
                        "name": "推广名称4",
                        "fav": 0,
                        "show": 9911,
                        "weak": 8976,
                        "signin": 8807,
                        "click": 8050,
                        "active": 7668,
                        "day7": 1547,
                        "day30": 2357,
                        "tomorrow": 7278,
                        "day": 5309,
                        "week": 1655,
                        "month": 9043
                    },
                    {
                        "name": "推广名称5",
                        "fav": 0,
                        "show": 934,
                        "weak": 1394,
                        "signin": 6463,
                        "click": 5278,
                        "active": 9256,
                        "day7": 209,
                        "day30": 3563,
                        "tomorrow": 8285,
                        "day": 1230,
                        "week": 4840,
                        "month": 9908
                    },
                    {
                        "name": "推广名称6",
                        "fav": 0,
                        "show": 6856,
                        "weak": 1608,
                        "signin": 457,
                        "click": 4949,
                        "active": 2909,
                        "day7": 4525,
                        "day30": 6171,
                        "tomorrow": 1920,
                        "day": 1966,
                        "week": 904,
                        "month": 6851
                    },
                    {
                        "name": "推广名称7",
                        "fav": 0,
                        "show": 5107,
                        "weak": 6407,
                        "signin": 4166,
                        "click": 7970,
                        "active": 1002,
                        "day7": 8701,
                        "day30": 9040,
                        "tomorrow": 7632,
                        "day": 4061,
                        "week": 4359,
                        "month": 3676
                    },
                    {
                        "name": "推广名称8",
                        "fav": 0,
                        "show": 862,
                        "weak": 6520,
                        "signin": 6696,
                        "click": 3209,
                        "active": 6801,
                        "day7": 6364,
                        "day30": 6850,
                        "tomorrow": 9408,
                        "day": 2481,
                        "week": 1479,
                        "month": 2346
                    },
                    {
                        "name": "推广名称9",
                        "fav": 0,
                        "show": 567,
                        "weak": 5859,
                        "signin": 128,
                        "click": 6593,
                        "active": 1971,
                        "day7": 7596,
                        "day30": 3546,
                        "tomorrow": 6641,
                        "day": 1611,
                        "week": 5534,
                        "month": 3190
                    },
                    {
                        "name": "推广名称10",
                        "fav": 0,
                        "show": 3651,
                        "weak": 1819,
                        "signin": 4595,
                        "click": 7499,
                        "active": 7405,
                        "day7": 8710,
                        "day30": 5518,
                        "tomorrow": 428,
                        "day": 9768,
                        "week": 2864,
                        "month": 5811
                    }
                ]
            }
        },
        methods: {
          // 拖拽
          onDragDrop(first, end) {
            //转成int型，方便后续使用
            first = parseInt(first);
            end = parseInt(end);
            let tmp = this.data7[first];
            if (first < end) {
              for (var i = first + 1; i <= end; i++) {
                this.data7.splice(i - 1, 1, this.data7[i]);
              }
              this.data7.splice(end, 1, tmp);
            }
            if (first > end) {
              for (var i = first; i > end; i--) {
                this.data7.splice(i, 1, this.data7[i - 1]);
              }
              this.data7.splice(end, 1, tmp)
            }
            //重置排序值
            let index = 1;
            this.data7.forEach(e => {
              e.sort = index;
              index++;
            });
            //排序值重置后，向后台发送请求，更新数据库中数据的排序，这里就不写了
            //axios
            console.log(JSON.stringify(this.data7))
          },
           
        }
    }
</script>
 

iview 自定义指令实现Table左右横向拖拽的更多相关文章

  1. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  2. jQuery内容横向拖拽滚动

    如果有业务需求:使用横向滚动,而又不想用滚动条,可以使用横向拖拽滚动,主要是利用元素的scrollLeft特性: 废话不多说直接上代码: css: .box{ width:100%; height:3 ...

  3. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  4. element-UI ，Table组件实现拖拽效果

    拖拽效果,先放效果图,步骤放在后面~~ 一.引入三方插件 1.引入sortable.js的包: npm install sortable.js --save 2.或者npm i -S vuedragg ...

  5. jquery.dad.js实现table的垂直拖拽（并取到当前拖拽对象）

    http://sc.chinaz.com/jiaoben/161202572210.htm 1.首先官网实例,实现的都是div为容器的元素拖拽,示例如下: 2.最近的项目,要实现tbody的每一行tr ...

  6. 【Android】HorizontalScrollView内子控件横向拖拽

    前言 网上ListView上下拖动的例子有,效果也很好,但是项目要横着拖的,只要硬着头皮自己写(主要是没找到合适的),参考文章1修改而来,分享一下. 声明 欢迎转载,但请保留文章原始出处:)  博客园 ...

  7. css3 横向拖拽

    css: .tab{         list-style-type: none;         display:-webkit-box;         display:-webkit-flex; ...

  8. 使用 vue3 的自定义指令给 element-plus 的 el-dialog 增加拖拽功能

    element-plus 提供的 el-dialog 对话框功能非常强大,只是美中不足不能通过拖拽的方式改变位置,有点小遗憾,那么怎么办呢?我们可以通过 vue 的自定义指令来实现一个可以拖拽的对话框 ...

  9. vue中自定义指令的使用

    原文地址 vue中除了内置的指令(v-show,v-model)还允许我们自定义指令 想要创建自定义指令,就要注册指令(以输入框获取焦点为例) 一.注册全局指令: // 注册一个全局自定义指令 `v- ...

  10. 基于Vue实现拖拽效果

    参考地址:基于Vue实现拖拽效果 参考链接中讲的比较详细,我只使用了其中自定义指令的方法.整体代码如下: <template> <!-- 卡片 --> <div clas ...

随机推荐

  1. Pytorch实战学习（二）：用Pytorch实现逻辑回归

    <PyTorch深度学习实践>完结合集_哔哩哔哩_bilibili 用Pytorch实现逻辑回归 Logistic Regression 从线性回归 →​ 逻辑回归 1.分类问题 计算属于 ...

  2. FastJson JdbcRowSetImpl

    Java安全之FastJson JdbcRowSetImpl 链分析 利用限制 RMI利用的JDK版本≤ JDK 6u132.7u122.8u113 LADP利用JDK版本≤ 6u211 .7u201 ...

  3. Docker CLI docker build 常用命令

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现虚拟化.Docker是内核 ...

  4. 《Makefile中传递宏定义到源文件》

    Makefile中定义的变量无法直接传递到头文件中,因为头文件是在预编译阶段处理的,而Makefile中的变量是在编译阶段处理的. 如果需要在头文件中使用Makefile中定义的变量,可以在头文件中使 ...

  5. QT管理网络状态和网络连接

    参考:http://www.cleartechfei.com/2020/07/qt%E4%BD%BF%E7%94%A8http%E5%8D%8F%E8%AE%AE/ 1. 用Qt框架进行应用开发的过程 ...

  6. （python）python 3.9 安装 robotframework-ride 因为 wxPython 失败

    1. 正常安装方式 1)安装 robotframework pip install robotframework 2) 安装 robotframework-ride pip install robot ...

  7. 如何在winform打包时带上sqlite数据库

    sqlite数据库下载及使用:https://blog.csdn.net/Yyuanyuxin/article/details/105508886sqlite数据库可视化工具-- DB.Browser ...

  8. C++内存分配Arena，指的是提前分配的一大块连续内存空间

    参考: https://stackoverflow.com/questions/12825148/what-is-the-meaning-of-the-term-arena-in-relation-t ...

  9. windows sshd powershell 配置

    安装sshd打开"设置",选择"应用">"应用和功能",然后选择"可选功能" .扫描列表,查看是否已安装 Open ...

  10. 【Tomcat】ubuntu系统安装Tomcat

    Tomcat简介 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,支持最新的Servlet 2.4 和JSP 2.0 规范,在中小型系统和并发访问用户不是很多的场 ...