el-table 实现按住鼠标左键拖动横向滚动条

怪我！为什么?

已于 2023-06-30 14:24:29 修改

阅读量347

点赞数 1

文章标签： vue.js javascript 前端

于 2023-06-30 10:25:22 首次发布

本文链接：https://blog.csdn.net/weixin_60847252/article/details/131471158

版权

<el-table ref="cesTable" @mousedown.native="mouseDownHandler" @mouseup.native="mouseUpHandler" @mousemove.native="mouseMoveHandler">
</el-table>

  data() {
    return {
      mouseFlag: false,
      mouseOffset: 0,
    };
  },

methods: {
    mouseDownHandler(e) {
      this.mouseOffset = e.clientX;
      this.mouseFlag = true;
    },
    mouseUpHandler(e) {
      this.mouseFlag = false;
    },
    mouseMoveHandler(e) {
      // 这里面需要注意，通过ref需要那个那个包含table元素的父元素
      let divData = this.$refs.cesTable.bodyWrapper;
      if (this.mouseFlag) {
        // 设置水平方向的元素的位置
        divData.scrollLeft -= (- this.mouseOffset + (this.mouseOffset = e.clientX));
      }
    },
}