临沧网站建设公司,服装平台网站有哪些,网站观赏,wordpress编辑html时隔多日#xff0c;再次遇到值得记录的问题。
需求
项目前端使用vue框架#xff0c;页面使用element-ui进行页面快速搭建。默认的table组件当表格过长时#xff0c;下方会出现横向的滚动条#xff0c;便于用户对表格进行左右滑动。考虑到页面美观问题#xff0c;滚动条…时隔多日再次遇到值得记录的问题。
需求
项目前端使用vue框架页面使用element-ui进行页面快速搭建。默认的table组件当表格过长时下方会出现横向的滚动条便于用户对表格进行左右滑动。考虑到页面美观问题滚动条设置的很窄导致用户使用时不方便进行左右滑动。 现要求去除表格下方滚动条用户可直接拖拽表格实现左右滑动功能。 表格设置固定表头和列实践证明并不影响此功能。
思路
鼠标点击进行拖拽首先想到鼠标的点击事件添加mousedown、mouseleave、mouseup和mousemove事件的监听器实现拖拽效果。通过设置tableBodyWrapper.style.overflow hidden;隐藏原生的滚动条。
实现
要实现拖拽功能并确保 tableBodyWrapper 可以正确拖拽需要设置事件监听器和对样式进行一些调整。下面是实现代码 templatediv reftableContainer classtable-containerel-table:datatableDatastylewidth: 100%el-table-columnpropdatelabel日期width180/el-table-columnel-table-columnpropnamelabel姓名width180/el-table-columnel-table-columnpropaddresslabel地址/el-table-column/el-table/div/templatescript
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(找不到表体。);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;});// 隐藏滚动条tableBodyWrapper.style.overflowX hidden;});}}
};
/scriptstyle
.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 来隐藏原生滚动条但确保滚动功能仍然有效。
更新兼容手机拖拽功能
因之前代码只对pc端进行实现手机进行拖拽无反应现新加入手机拖拽事件。以下是修改后的代码添加了触摸事件的支持
div reftableContainer classtable-containerel-table reftable/el-table
/divmethods: {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;});// 触摸事件tableBodyWrapper.addEventListener(touchstart, (e) {isDown true;startX e.touches[0].pageX - tableBodyWrapper.offsetLeft;scrollLeft tableBodyWrapper.scrollLeft;});tableBodyWrapper.addEventListener(touchend, () {isDown false;});tableBodyWrapper.addEventListener(touchmove, (e) {if (!isDown) return;e.preventDefault();const x e.touches[0].pageX - tableBodyWrapper.offsetLeft;const walk (x - startX) * 2; // scroll-fasttableBodyWrapper.scrollLeft scrollLeft - walk;});// 隐藏滚动条tableBodyWrapper.style.overflowX hidden;});}
}在这个代码中我们为 touchstart, touchend 和 touchmove 事件添加了相应的处理函数以支持在手机上的左右拖拽操作。这样既兼容了PC上的鼠标拖拽也支持了手机上的触摸拖拽。
