有时候表格内容会很多，需要横向滚动查看右边的内容，又不想到底部拖动滚动条，如果能直接在内容中拖动就好了，这个时候就可以用 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. Jupyter notebook upload无法加载本地ipynb文件

    可能是本地浏览器(IE)问题,修改默认浏览器.

  2. JS脱敏姓名、身份证、电话、邮箱

    一.姓名脱敏 handleName(name) { let arr = Array.from(name) let result = '' if (arr.length === 2) { result ...

  3. TCP&UDP测试工具使用方式方法

    第一项:测试TCP 步骤1:首先需要一台电脑上建立一个TCP服务器.并设置一个端口号如下图60003即可.并开启服务 步骤2:在另外一台电脑上,创建一个客户端连接,如下图.输入服务器的IP地址和端口号 ...

  4. MyBatis_02_(搭建Mybatis)

    搭建MyBatis 1-开发环境 2-创建Maven工程 2.1- 打包方式 2.2 导入依赖 <!-- 打包方式jar--> <packaging>jar</packa ...

  5. html的table多级表头表格的代码

    1,两级表头的代码 <html> <head> <title>多层表头</title> <link rel="stylesheet&qu ...

  6. jar包启动脚本, 以及外置配置文件application.yml

    想使用sh脚本来启动,停止,重启我们的jar服务, 顺便还要外置配置文件方便修改 示例server.sh如下,启动命令为sh server.sh start或restart或stop,修改其中的这几个 ...

  7. sql offset 优化

    // let groupSql = ` select id,jd_gcj02ll, wd_gcj02ll from ${tablename_qiye} where id between ${size ...

  8. node_modules修改？

    1.直接改node_modules的内容..... 但是下次npm i之后那个包的代码又恢复原状 2.独立维护需要改的包 把需要改的包复制下来,修改,推送到npm上. 项目里用新包即可,但是增加了维护 ...

  9. ubuntu - 程序运行的一些基础知识

    1.指定编码格式 -finput-charset=GB2312 指定 C 程序的编码方式为 GB2312,不指定时默认编码方式为 UTF-8 -fexec-charset=GB2312 指定 可执行程 ...

  10. Freertos stack-overflow 检测

    (出现的地址信息没有特定意义,仅供参考) vApplicationStackOverflowHook() at rtos.c:371 0x55aa vTaskSwitchContext() at ta ...