el-table的横向滚动拖拽

el-table实现鼠标横向拖拽滚动和滚轴滚动

• 封装方法，这是vue2写法，紧张是传一个el-table 的一个ref，相干的逻辑在该函数内
  函数功能：
  
  
  
  • 监听鼠标滚轮变乱,实现横向滚动
    
  • 不能选中笔墨
    
  • 添加鼠标左键长按变乱,实现横向拖拽
    
  
  

1. /**
2. * 为 element-ui 表格添加横向滚动和拖拽功能
3. * @param {Object} tableRef - 表格的 Vue ref 对象
4. */
5. export function initTableScroll(tableRef) {
6.   if (!tableRef || !tableRef.$el) {
7.     console.warn('tableRef 无效');
8.     return;
9.   }
11.   const tableEl = tableRef.$el;
12.   const bodyWrapper = tableRef.bodyWrapper;
14.   // 监听鼠标滚轮事件,实现横向滚动
15.   tableEl.addEventListener('mousewheel', (e) => {
16.     e.preventDefault(); // 阻止默认的垂直滚动
17.     const delta = e.wheelDelta || -e.detail;
18.     // console.log(delta);
20.     bodyWrapper.scrollLeft -= delta;
22.   }, { passive: false });
23.   // 不能选中文字
24.   tableEl.addEventListener('selectstart', (e) => {
25.     e.preventDefault();
26.   });
27.   // 添加鼠标左键长按事件,实现横向拖拽
28.   tableEl.addEventListener('mousedown', (e) => {
29.     console.log(e);
31.     if (e.button === 0) {
32.       const startX = e.clientX;
33.       const startScrollLeft = bodyWrapper.scrollLeft;
35.       const handleMouseMove = (e) => {
36.         const dx = e.clientX - startX;
37.         bodyWrapper.scrollLeft = startScrollLeft - dx;
38.       };
40.       const handleMouseUp = () => {
41.         document.removeEventListener('mousemove', handleMouseMove);
42.         document.removeEventListener('mouseup', handleMouseUp);
43.       };
45.       document.addEventListener('mousemove', handleMouseMove);
46.       document.addEventListener('mouseup', handleMouseUp);
47.     }
48.   });
49. }

复制代码

2.使用示例：

1. //table.vue
2. //html
3. <el-table
4.       ref="elTableRef"
5.    、、、、、
6.     >
7.   data() {
8.     return {
9.       elTableRef: null,
10.     };
11.   },
13. mounted(){
14. initTableScroll(this.$refs.elTableRef);
15. }

复制代码

vue3的写法照着上面的修改一下就行