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

    一.数据库和算法   表名:student,name,course,score    张青  语文  72    王华  数学72    张华  英语 81    张青 物理 671.用sql查询出& ...

  2. Camstar报错：cannot be accessed through null object reference at CDO 'xxx'

  3. wireshark抓包海康威视摄像头

    1:不清楚海康威视摄像头IP地址:网线直连电脑,打开wireshark抓包 2:抓包在source能看到  Hangzhou类似   说明是摄像头.ARP协议  然后192.168.0.251 是摄像 ...

  4. webpack5用url-loader(file-loader)处理图片和img-loader压缩图片

    webpack-cli 4.0的版本和 webpack-dev-server 3.11.0的版本不兼容,只能用webpack@5.0 + webpack-cli@3.3.12 + webpack-de ...

  5. python之目录结构01

    本文档主要是自己学习巩固以及复习之用,主要写些自己的学习体会! 以下为一个简要的目录构: Foo/ |-- bin/ | |-- foo | |-- foo/ | |-- tests/ | | |-- ...

  6. springcloud(三) - 负载均衡Ribbon

    功能介绍 基本保证每个服务不同的ip接收到的请求数量是一样的,确保在微服务下没有没有那个服务器负载过多而另外一个闲置. IRule:根据规则获取制定的服务 规则列表 RoundRobinRule:轮询 ...

  7. spring mvc @Configuration addConverterFactory 无效问题

    spring 版本: 4.3.7 addFormatters(FormatterRegistry registry) 不生效 <!-- 此处与 @EnableWebmvc 冲突, 配置此处后 E ...

  8. 实验1task5

    <实验结论> #include <stdio.h> #include <stdlib.h> int main() { float a,b,c; printf(&qu ...

  9. Flume实现写入es

    Flume定制elasticsearch sink源码 最近尝试通过Flume将消息写入elasticsearch,但是flume并没有对每个es版本提供支持,仅仅保留了对0.9版本支持,可能是由于e ...

  10. 【C++】关于智能指针的简单学习

    智能指针 示例类: class String { private: string m_value; public: String(string str) :m_value(str) { cout &l ...