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

    <template>   <div class="about">     <div>       <input type="te ...

  2. M1 IntelliJ IDEA2022安装报错解决方法

    下载地址:http://pan.jizhouyun.com/s/I3QJVzk3et 报错一:系统权限问题 报错示例: 1.XX已损坏,打不开:您应该将它移到废纸娄/已损坏 2.打不开:您应该推出磁盘 ...

  3. sass和less以及stylus的区别

    一.区别: 需要配置不同:Sass需要Ruby环境:Less需要引入less.js:Stylus需要安装node 使用语法不用:Sass变量使用$ ;Less变量使用@:stylus变量使用 属性名 ...

  4. C# 在GridView里面使用a标签下载文件（图片）

    不能使用ajax进行下载文件的操作,具体原因需百度 前端页面,在GridView里面使用模板列,模板列放a标签 <cimesui:cimesGridView ID="GridView1 ...

  5. Linux FTP服务器配置文件vsftpd.conf 配置

    配置文件/etc/vsftpd/vsftpd.conf local_enable=YES            write_enable=YESlocal_umask=022dirmessage_en ...

  6. BIP查询框添加查询条件

    // 搜索框添加查询条件 viewModel.on("afterMount", function (data) { let agentId = viewModel.getParam ...

  7. ERA5气压层数据驱动WRF的一些问题

    感谢Dawn的建议,兰溪之水的WRF教程 参考了一些经验,并结合实际后,成功用ERA5驱动WRF.实际上,用ERA5数据驱动WRF的方法和用ERA-Interim 数据驱动WRF极其类似. 总结几点是 ...

  8. 将excel按照某一列拆分成多个文件

    1.打开目标excel,按alt + f11键打开VBE窗口 2.选择插入->模块粘贴下面代码到编辑器中 Sub 保留表头拆分数据为若干新工作簿() Dim arr, d As Object, ...

  9. kali中MulVAL的安装与配置

    我的Kali版本 配置JAVA环境 Kali 2021.3自带openjdk 11的环境 # 验证openjdk11 java --version javac --version 能输出版本号则说明环 ...

  10. git diff如何确定差异所在函数context

    问题 在使用git diff 展示c/c++文件修改内容时,除了显示修改上下文外,输出还贴心的展示了修改所在的函数.尽管这个展示并不总是准确,但是能够做到大部分情况下准确也已经相当不错:是不是git内 ...