vue2实现表格拖拽功能。整列的数据可以随意拖拽排序，但是行的拖拽只影响当前列

概述

本文介绍基于 Vue2 实现的表格组件，支持以下核心功能：

• 列拖拽排序（整列位置交换）
• 行拖拽排序（每列内部独立排序）
• 自适应列宽与内容溢出提示
• 可视化拖拽反馈效果
• 数据与视图的自动同步

功能演示

源码分享

补充样式

.custom-tooltip {
  position: absolute;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 4px;
  font-size: 12px;
  z-index: 9999;
  max-width: 300px;
  white-space: pre-wrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  &::after {
    // 添加小三角指示器
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-bottom: 5px solid rgba(0, 0, 0, 0.8);
  }
}