vue 自定义指令 实现鼠标在element table 表体中 控制滚动

element table 表体中，鼠标控制滚动

1.自定义鼠标滚动指令

  directives: {
                            tabledrag: {
                                inserted: function (el) {
                                    el = el.getElementsByClassName('el-table__body-wrapper')[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;

                                        };

                                    };

                                }
                            }
                        }

2.引用

<el-table v-tabledrag></el-table>