当前位置：首页 > VUE

vue实现表格列拖拽

2026-02-23 16:01:55VUE

Vue 实现表格列拖拽的方法

使用 vuedraggable 插件

安装 vuedraggable 插件，适用于基于列的拖拽排序
npm install vuedraggable --save

在组件中引入并使用：

import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      headers: ['ID', 'Name', 'Age'],
      tableData: [
        { id: 1, name: 'John', age: 20 },
        { id: 2, name: 'Jane', age: 24 }
      ]
    }
  }
}

模板部分实现：

<draggable v-model="headers" tag="tr">
  <th v-for="header in headers" :key="header">{{ header }}</th>
</draggable>
<tr v-for="item in tableData" :key="item.id">
  <td v-for="header in headers" :key="header">{{ item[header.toLowerCase()] }}</td>
</tr>

原生 HTML5 拖拽 API

通过 HTML5 的拖拽事件实现列交换

vue实现表格列拖拽

设置可拖拽列：

methods: {
  dragStart(e, index) {
    e.dataTransfer.setData('text/plain', index)
    e.dataTransfer.effectAllowed = 'move'
  },
  drop(e, targetIndex) {
    const sourceIndex = e.dataTransfer.getData('text/plain')
    const newHeaders = [...this.headers]
    newHeaders.splice(targetIndex, 0, newHeaders.splice(sourceIndex, 1)[0])
    this.headers = newHeaders
  }
}

模板事件绑定：

<tr>
  <th v-for="(header, index) in headers" 
      :key="header"
      draggable="true"
      @dragstart="dragStart($event, index)"
      @dragover.prevent
      @drop="drop($event, index)">
    {{ header }}
  </th>
</tr>

使用 Element UI 的 Table 组件

Element UI 表格支持自定义列拖拽

vue实现表格列拖拽

安装 Element UI： npm install element-ui -S

实现列拖拽逻辑：

handleHeaderDragEnd(newIndex, oldIndex) {
  const headers = [...this.headers]
  const movedHeader = headers.splice(oldIndex, 1)[0]
  headers.splice(newIndex, 0, movedHeader)
  this.headers = headers
}

模板配置：

<el-table :data="tableData">
  <el-table-column
    v-for="header in headers"
    :key="header.prop"
    :prop="header.prop"
    :label="header.label"
    :column-key="header.prop"
    sortable
    resizable
    show-overflow-tooltip>
  </el-table-column>
</el-table>