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

element-ui组件table去除下方滚动条，实现鼠标左右拖拽移动表格

news 来源：原创 2024/9/29 11:40:24

时隔多日，再次遇到值得记录的问题。

需求

项目前端使用vue框架，页面使用element-ui进行页面快速搭建。默认的table组件当表格过长时，下方会出现横向的滚动条，便于用户对表格进行左右滑动。考虑到页面美观问题，滚动条设置的很窄，导致用户使用时不方便进行左右滑动。
现要求，去除表格下方滚动条，用户可直接拖拽表格实现左右滑动功能。

思路

鼠标点击进行拖拽，首先想到鼠标的点击事件，添加mousedown、mouseleave、mouseup和mousemove事件的监听器，实现拖拽效果。通过设置tableBodyWrapper.style.overflow = 'hidden';隐藏原生的滚动条。

实现

要实现拖拽功能，并确保 tableBodyWrapper 可以正确拖拽，需要设置事件监听器和对样式进行一些调整。下面是实现代码：

  <template><div ref="tableContainer" class="table-container"><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table><div ref="tableContainer" class="table-container"></template><script>
export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]};},mounted() {this.enableDrag();},methods: {enableDrag() {this.$nextTick(() => {const tableContainer = this.$refs.tableContainer;const tableBodyWrapper = this.$refs.table.$el.querySelector('.el-table__body-wrapper');if (!tableBodyWrapper) {console.error('Table body wrapper not found.');return;}let isDown = false;let startX, scrollLeft;tableBodyWrapper.addEventListener('mousedown', (e) => {isDown = true;startX = e.pageX - tableBodyWrapper.offsetLeft;scrollLeft = tableBodyWrapper.scrollLeft;tableBodyWrapper.style.cursor = 'grabbing';});tableBodyWrapper.addEventListener('mouseleave', () => {isDown = false;tableBodyWrapper.style.cursor = 'grab';});tableBodyWrapper.addEventListener('mouseup', () => {isDown = false;tableBodyWrapper.style.cursor = 'grab';});tableBodyWrapper.addEventListener('mousemove', (e) => {if (!isDown) return;e.preventDefault();const x = e.pageX - tableBodyWrapper.offsetLeft;const walk = (x - startX) * 2; // scroll-fasttableBodyWrapper.scrollLeft = scrollLeft - walk;});// Hide the native scroll bartableBodyWrapper.style.overflowX = 'hidden';});}}
};
</script><style>
.table-container {overflow: hidden;white-space: nowrap;
}.el-table__body-wrapper {cursor: grab;
}.el-table__body-wrapper:active {cursor: grabbing;
}
</style>

解释：

获取DOM元素：在this.$nextTick()回调中，通过this.$refs.table.$el.querySelector('.el-table__body-wrapper')获取到实际的表格内容区域的DOM元素。这样就确保我们在对DOM元素进行操作，而不是组件实例。
检查 DOM 元素存在：在 this.$nextTick 中，我们先检查 tableElement 是否存在，然后再查询 tableBodyWrapper。
添加错误处理：如果 tableBodyWrapper 没有找到，输出错误信息到控制台。这有助于调试并确保代码的稳健性。
拖拽事件绑定到 tableBodyWrapper：确保拖拽事件绑定在实际可滚动的 tableBodyWrapper 上。
样式调整：使用 tableBodyWrapper 的样式来显示抓手光标，并在拖动时切换光标样式。
隐藏水平滚动条：通过设置 overflowX: hidden 来隐藏原生滚动条，但确保滚动功能仍然有效。