当前位置：首页 > news >正文

【前端】element表格X轴滚动优化拖拽滚动

news 2025/4/28 8:21:21

需求：
表格中有很多的列，导致表格有了X滚动条，由于表格的数据行很多，每次都需要滚动到最下面才能看到X滚动条，想要鼠标放表格变小手，小手按住可以拖动左右查看数据
解决：
添加监听事件
demo案例如下，vue2环境即可

<template><div ref="tableContainer" class="table-container"><el-table ref="table" :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="200"></el-table-column><el-table-column prop="name" label="姓名" width="200"></el-table-column><el-table-column prop="address" label="地址" width="400"></el-table-column><el-table-column prop="date" label="日期" width="200"></el-table-column><el-table-column prop="name" label="姓名" width="200"></el-table-column><el-table-column prop="address" label="地址" width="400"></el-table-column></el-table></div>
</template><script>
export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄',},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄',},{date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄',},{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄',date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄',},],tableBodyWrapper: null,handlers: {mousedown: null,mousemove: null,mouseleave: null,mouseup: null,},isDragDown: false,dragStartX: 0,dragScrollLeft: 0,}},mounted() {this.enableDrag()},beforeDestroy() {this.removeDragListeners()},methods: {removeDragListeners() {if (this.tableBodyWrapper && this.handlers) {// 移除所有事件监听this.tableBodyWrapper.removeEventListener('mousedown', this.handlers.mousedown)this.tableBodyWrapper.removeEventListener('mouseleave', this.handlers.mouseleave)this.tableBodyWrapper.removeEventListener('mouseup', this.handlers.mouseup)this.tableBodyWrapper.removeEventListener('mousemove', this.handlers.mousemove)// 清除引用this.tableBodyWrapper = nullthis.handlers = null}},enableDrag() {this.$nextTick(() => {const table = this.$refs.table.$elconst tableBodyWrapper = table.querySelector('.el-table__body-wrapper')if (!tableBodyWrapper) {console.error('找不到表体')return}// 保存DOM引用this.tableBodyWrapper = tableBodyWrapper// 定义具名事件处理函数并保存引用const handlers = {mousedown: (e) => {const rect = tableBodyWrapper.getBoundingClientRect()this.isDragDown = truethis.dragStartX = e.clientX - rect.leftthis.dragScrollLeft = tableBodyWrapper.scrollLefttableBodyWrapper.style.cursor = 'grabbing'},mouseleave: () => {this.isDragDown = falsetableBodyWrapper.style.cursor = 'grab'},mouseup: () => {this.isDragDown = falsetableBodyWrapper.style.cursor = 'grab'},mousemove: (e) => {if (!this.isDragDown) returne.preventDefault()const rect = tableBodyWrapper.getBoundingClientRect()const x = e.clientX - rect.leftconst walk = (x - this.dragStartX) * 3tableBodyWrapper.scrollLeft = this.dragScrollLeft - walk},}// 保存处理函数引用this.handlers = handlers// 绑定事件监听tableBodyWrapper.addEventListener('mousedown', handlers.mousedown)tableBodyWrapper.addEventListener('mouseleave', handlers.mouseleave)tableBodyWrapper.addEventListener('mouseup', handlers.mouseup)tableBodyWrapper.addEventListener('mousemove', handlers.mousemove)// 隐藏滚动条tableBodyWrapper.style.overflowX = 'hidden'})},},
}
</script><style>
.table-container {width: 600px;
}
</style>