<Element UI>二次封装，自定义功能记录

< el-table > 表格

功能一： 列表过长时，按住ctrl的同时可鼠标拖拽滚动（拖拽过程中文字禁止选中）

enableDrag() {
        this.$nextTick(() => {
        // 仅允许表内容区拖拽，fixed列和表头不受影响
          const tableBodyWrapper = this.$refs.multipleTable.$el.querySelector('.el-table__body-wrapper');
          if (!tableBodyWrapper) {
            console.error('找不到表体。');
            return;
          }

          let isDown = false;
          let startX, scrollLeft;
          let ctrlKeyPressed = false; // 跟踪Ctrl键状态

          // 禁止表格内的文字选择
          const disableTableTextSelection = () => {
            tableBodyWrapper.style.userSelect = 'none';
            tableBodyWrapper.style.webkitUserSelect = 'none';
          };

          // 恢复表格内的文字选择
          const enableTableTextSelection = () => {
            tableBodyWrapper.style.userSelect = '';
            tableBodyWrapper.style.webkitUserSelect = '';
          };

          // 监听全局Ctrl键按下状态
          const handleKeyDown = (e) => {
            if (e.key === 'Control' || e.key === 'Meta') { // Meta键对应Mac上的Command键
              ctrlKeyPressed = true;
            }
          };

          const handleKeyUp = (e) => {
            if (e.key === 'Control' || e.key === 'Meta') {
              ctrlKeyPressed = false;
              // 如果正在拖拽但松开Ctrl键，则停止拖拽
              if (isDown) {
                isDown = false;
                tableBodyWrapper.style.cursor = '';
                enableTableTextSelection();
              }
            }
          };

          // 添加全局键盘事件监听
          window.addEventListener('keydown', handleKeyDown);
          window.addEventListener('keyup', handleKeyUp);

          tableBodyWrapper.addEventListener('mousedown', (e) => {
            if (e.button !== 0 || !ctrlKeyPressed) return; // 仅左键且Ctrl键按下时触发拖拽
            isDown = true;
            startX = e.pageX - tableBodyWrapper.offsetLeft;
            scrollLeft = tableBodyWrapper.scrollLeft;
            tableBodyWrapper.style.cursor = 'grabbing';
            disableTableTextSelection();
          });

          tableBodyWrapper.addEventListener('mouseleave', () => {
            if (!isDown) return;
            isDown = false;
            tableBodyWrapper.style.cursor = '';
            enableTableTextSelection();
          });

          tableBodyWrapper.addEventListener('mouseup', () => {
            if (!isDown) return;
            isDown = false;
            tableBodyWrapper.style.cursor = '';
            enableTableTextSelection();
          });

          tableBodyWrapper.addEventListener('mousemove', (e) => {
            if (!isDown || !ctrlKeyPressed) return; // 只有按下Ctrl键时才执行拖拽
            e.preventDefault();
            const x = e.pageX - tableBodyWrapper.offsetLeft;
            const walk = (x - startX) * 2;
            tableBodyWrapper.scrollLeft = scrollLeft - walk;
          });

          // 组件销毁时清理
          this.$once('hook:beforeDestroy', () => {
            enableTableTextSelection();
            window.removeEventListener('keydown', handleKeyDown);
            window.removeEventListener('keyup', handleKeyUp);
          });
        });
      }