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

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

<template><el-table:data="tableData"style="width: 600px"height="250"><el-table-columnfixedprop="date"label="日期"width="150"></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column><el-table-columnprop="province"label="省份"width="120"></el-table-column><el-table-columnprop="city"label="市区"width="120"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="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>

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

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

再添加按钮可拖动功能

 

<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 -= 120this.$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>

最终效果：