Vue 3表格拖拽排序实战：5分钟搞定行/列重排与列宽调整（附完整代码）

Vue 3表格拖拽排序实战：5分钟实现高效数据管理

在数据密集型的后台管理系统开发中，表格交互体验直接影响用户效率。传统表格只能提供静态展示，而现代Web应用需要更灵活的交互方式——这正是拖拽排序技术大显身手的场景。本文将带你快速实现Vue 3表格的行列重排与列宽调整功能，所有核心代码均可直接集成到你的项目中。

1. 环境准备与基础表格搭建

我们先创建一个支持Composition API的Vue 3项目，这里使用Vite作为构建工具：

npm create vite@latest vue3-drag-table --template vue
cd vue3-drag-table
npm install vuedraggable@next

基础表格组件结构如下，我们采用纯CSS实现响应式布局，避免引入额外的UI库：

<!-- DragTable.vue -->
<template>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th v-for="(col, index) in columns" 
              :key="col.key"
              :style="{ width: col.width + 'px' }">
            {
  
  { col.label }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in tableData" :key="row.id">
          <td v-for="col in columns" :key="col.key">
            {
  
  { row[col.key] }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
const columns = ref([
  { label: 'ID', key: 'id', width: 80 },
  { label: '姓名', key: 'name', width: 120 },
  { label: '年龄', key: 'age', width: 80 }
])

const tableData = ref([
  { id: 1