el-table拖拽

最新推荐文章于 2024-07-09 16:41:14 发布

凉风风凉

最新推荐文章于 2024-07-09 16:41:14 发布

阅读量109

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/fawzia/article/details/133638059

版权

el-table拖拽
// 在main.js或其他适当位置注册自定义指令
import Vue from ‘vue’;

Vue.directive(‘draggable-table’, {
bind(el) {
el.querySelector(‘.el-table__body-wrapper’).style.overflow = ‘hidden’;
el.querySelector(‘.el-table__body-wrapper’).style.position = ‘relative’;
el.querySelector(‘.el-table__body-wrapper’).style.cursor = ‘grab’;

let isDragging = false;
let startX = 0;
let scrollLeft = 0;

el.querySelector('.el-table__body-wrapper').addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.pageX - el.querySelector('.el-table__body-wrapper').offsetLeft;
  scrollLeft = el.querySelector('.el-table__body-wrapper').scrollLeft;
  el.querySelector('.el-table__body-wrapper').style.cursor = 'grabbing';
});

el.querySelector('.el-table__body-wrapper').addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const x = e.pageX - el.querySelector('.el-table__body-wrapper').offsetLeft;
  const walk = (x - startX) * 3; // 调整拖拽速度
  el.querySelector('.el-table__body-wrapper').scrollLeft = scrollLeft - walk;
});

el.querySelector('.el-table__body-wrapper').addEventListener('mouseup', () => {
  isDragging = false;
  el.querySelector('.el-table__body-wrapper').style.cursor = 'grab';
});

el.querySelector('.el-table__body-wrapper').addEventListener('mouseleave', () => {
  isDragging = false;
  el.querySelector('.el-table__body-wrapper').style.cursor = 'grab';
});

},
});

// 在Vue组件中使用指令