一、項目初始化

1.1 技術棧說明

• Vue 3 Composition API
• vuedraggable：用于實現拖拽排序
• 原生 DOM 操作：用于列寬調整
• Element Plus（可選）：用于樣式和表格基礎結構

1.2 項目結構圖（Mermaid）

二、構建基礎表格組件

2.1 創建基本表格結構

<!-- TableComponent.vue -->
<template><div class="table-container"><table><thead><tr><th v-for="(col, index) in columns" :key="col.key">{{ col.label }}</th></tr></thead><tbody><tr v-for="(row, rowIndex) 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>
import { ref } from 'vue'const columns = ref([{ label: '姓名', key: 'name' },{ label: '年齡', key: 'age' },{ label: '地址', key: 'address' }
])const tableData = ref([{ id: 1, name: '小明', age: 25, address: '北京' },{ id: 2, name: '小紅', age: 30, address: '上海' },{ id: 3, name: '小剛', age: 28, address: '廣州' }
])
</script>

三、實現行拖拽排序

3.1 安裝依賴

npm install vuedraggable

3.2 使用 vuedraggable 實現拖拽

<template><draggable v-model="tableData" tag="tbody" item-key="id"><tr v-for="row in tableData" :key="row.id"><td v-for="col in columns" :key="col.key">{{ row[col.key] }}</td></tr></draggable>
</template><script setup>
import draggable from 'vuedraggable'
</script>

四、實現列寬拖拽調整

4.1 基本樣式設置

th {position: relative;padding-right: 8px;
}.resizer {position: absolute;top: 0;right: 0;width: 5px;cursor: col-resize;user-select: none;
}

4.2 添加拖拽邏輯

<thv-for="(col, index) in columns":key="col.key":style="{ width: col.width + 'px' }"@mousedown="startResize($event, index)"
>{{ col.label }}<span class="resizer"></span>
</th>let startX, startWidthconst startResize = (e, index) => {startX = e.clientXstartWidth = columns.value[index].width || 100document.addEventListener('mousemove', resize)document.addEventListener('mouseup', stopResize)function resize(e) {const newWidth = startWidth + (e.clientX - startX)columns.value[index].width = Math.max(newWidth, 60)}function stopResize() {document.removeEventListener('mousemove', resize)document.removeEventListener('mouseup', stopResize)}
}

五、實現列拖拽排序

5.1 轉換列為可拖拽結構

<draggable v-model="columns" tag="tr" item-key="key" direction="horizontal"><thv-for="(col, index) in columns":key="col.key":style="{ width: col.width + 'px' }"@mousedown="startResize($event, index)">{{ col.label }}<span class="resizer"></span></th>
</draggable>

5.2 保證數據對應正確列

<tr v-for="row in tableData" :key="row.id"><td v-for="col in columns" :key="col.key">{{ row[col.key] }}</td>
</tr>

六、可拓展功能實現

6.1 固定列實現（示意）

<th :class="{ 'sticky-left': index === 0 }"> ... </th>

.sticky-left {position: sticky;left: 0;background-color: #fff;z-index: 2;
}

6.2 列順序保存到本地存儲

watch(columns, (val) => {localStorage.setItem('columns', JSON.stringify(val))
}, { deep: true })onMounted(() => {const saved = localStorage.getItem('columns')if (saved) {columns.value = JSON.parse(saved)}
})

七、總結

通過本文，我們使用 Vue 3 實現了一個具備以下功能的可配置表格組件：

• ? 行拖拽排序
• ? 列寬度調整
• ? 列順序拖拽
• ? 固定列支持
• ? 用戶列設置持久化

該組件可廣泛應用于數據管理后臺、內容管理系統等場景，未來可繼續拓展如列隱藏、分組列頭、自定義渲染等功能。

---

到這里，這篇文章就和大家說再見啦！我的主頁里還藏著很多 篇 前端 實戰干貨，感興趣的話可以點擊頭像看看，說不定能找到你需要的解決方案～
創作這篇內容花了很多的功夫。如果它幫你解決了問題，或者帶來了啟發，歡迎：
點個贊?? 讓更多人看到優質內容
關注「前端極客探險家」🚀 每周解鎖新技巧
收藏文章?? 方便隨時查閱
📢 特別提醒：
轉載請注明原文鏈接，商業合作請私信聯系
感謝你的閱讀！我們下篇文章再見～ 💕