前端表格滑动滚动条太费事，做个浮动滑动插件

比如下面的表格，因为滚动条样式设计得很窄，所以用鼠标滑动起来很费劲

html 复制代码

<template>
  <el-table
    :data="tableData"
    style="width: 600px"
    height="250">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
      }
    }
  }
</script>
<style>
::-webkit-scrollbar-track {
    box-shadow: rgb(255, 255, 255) 0px 0px 0.27778rem inset;
    background: rgb(255, 255, 255);
    border-radius: 0.55556rem;
}
::-webkit-scrollbar-thumb {
    background: rgb(199, 0, 25);
    border-radius: 0.55556rem;
}
::-webkit-scrollbar {
    height: 0.33333rem;
    width: 0.33333rem;
}
</style>

使滚动条向左移，可以使用下面两种方法

html 复制代码

document.getElementsByClassName('el-table__body-wrapper')[0].scrollLeft += 120
// el-table 方法
this.$refs.elTable.$refs.bodyWrapper.scrollLeft += 120

再添加按钮可拖动功能

html 复制代码

<template>
  <div style="text-align: left;vertical-align: top;">
    <div ref="dialog" class="dialog-header" @mousedown="startDrag($event)">
      <el-button type="success" icon="el-icon-arrow-left" circle @click="leftClick"></el-button>
      <el-button type="success" icon="el-icon-arrow-right" circle @click="rightClick"></el-button>
    </div>
    <el-table :data="tableData" ref="elTable" style="width: 600px" height="250">
      <el-table-column fixed prop="date" label="日期" width="150">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="province" label="省份" width="120">
      </el-table-column>
      <el-table-column prop="city" label="市区" width="120">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="300">
      </el-table-column>
      <el-table-column prop="zip" label="邮编" width="120">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      isDragging: false,
      offsetX: 0,
      offsetY: 0
    }
  },
  methods: {
    leftClick() {
      // document.getElementsByClassName('el-table__body-wrapper')[0].scrollLeft -= 120
      this.$refs.elTable.$refs.bodyWrapper.scrollLeft -= 120
    },
    rightClick() {
      this.$refs.elTable.$refs.bodyWrapper.scrollLeft += 120
    },
    startDrag(event) {
      this.isDragging = true;
      this.offsetX = event.clientX - this.$refs.dialog.offsetLeft;
      this.offsetY = event.clientY - this.$refs.dialog.offsetTop;
      document.addEventListener('mousemove', this.drag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    drag(event) {
      if (this.isDragging) {
        this.$refs.dialog.style.left = event.clientX - this.offsetX + 'px';
        this.$refs.dialog.style.top = event.clientY - this.offsetY + 'px';
      }
    },
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.drag);
      document.removeEventListener('mouseup', this.stopDrag);
    }
  }
}
</script>
<style>
::-webkit-scrollbar-track {
  box-shadow: rgb(255, 255, 255) 0px 0px 0.27778rem inset;
  background: rgb(255, 255, 255);
  border-radius: 0.55556rem;
}

::-webkit-scrollbar-thumb {
  background: rgb(199, 0, 25);
  border-radius: 0.55556rem;
}

::-webkit-scrollbar {
  height: 0.33333rem;
  width: 0.33333rem;
}

.dialog-header {
  cursor: move;
  background-color: #f0f0f0;
  padding: 5px;
  position: absolute;
  z-index: 5;
}
</style>

最终效果：