当前位置：首页 > VUE

vue实现表格列拖拽

2026-01-23 01:21:15VUE

vue实现表格列拖拽的方法

使用vuedraggable库

vuedraggable是一个基于Sortable.js的Vue拖拽组件库，适合实现表格列的拖拽功能。

安装依赖：

vue实现表格列拖拽

npm install vuedraggable --save

示例代码：

vue实现表格列拖拽

<template>
  <table>
    <thead>
      <draggable v-model="headers" tag="tr">
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </draggable>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td v-for="header in headers" :key="header">{{ row[header] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      headers: ['姓名', '年龄', '性别', '职业'],
      rows: [
        { id: 1, 姓名: '张三', 年龄: 25, 性别: '男', 职业: '工程师' },
        { id: 2, 姓名: '李四', 年龄: 30, 性别: '女', 职业: '设计师' }
      ]
    }
  }
}
</script>

使用原生HTML5拖拽API

如果不希望引入额外库，可以使用HTML5原生拖拽API实现。

<template>
  <table>
    <thead>
      <tr>
        <th 
          v-for="(header, index) in headers" 
          :key="header"
          draggable="true"
          @dragstart="dragStart(index)"
          @dragover.prevent
          @drop="drop(index)"
        >
          {{ header }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td v-for="header in headers" :key="header">{{ row[header] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['姓名', '年龄', '性别', '职业'],
      rows: [
        { id: 1, 姓名: '张三', 年龄: 25, 性别: '男', 职业: '工程师' },
        { id: 2, 姓名: '李四', 年龄: 30, 性别: '女', 职业: '设计师' }
      ],
      draggedIndex: null
    }
  },
  methods: {
    dragStart(index) {
      this.draggedIndex = index
    },
    drop(index) {
      if (this.draggedIndex !== null) {
        const headers = [...this.headers]
        const draggedItem = headers[this.draggedIndex]
        headers.splice(this.draggedIndex, 1)
        headers.splice(index, 0, draggedItem)
        this.headers = headers
        this.draggedIndex = null
      }
    }
  }
}
</script>

使用Element UI表格拖拽

如果使用Element UI组件库，可以结合其表格和拖拽功能实现。

<template>
  <el-table :data="tableData" border>
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :fixed="column.fixed"
    />
  </el-table>
</template>

<script>
import { Sortable } from 'sortablejs'

export default {
  data() {
    return {
      columns: [
        { prop: 'date', label: '日期' },
        { prop: 'name', label: '姓名' },
        { prop: 'address', label: '地址' }
      ],
      tableData: [
        { date: '2023-01-01', name: '张三', address: '北京' },
        { date: '2023-01-02', name: '李四', address: '上海' }
      ]
    }
  },
  mounted() {
    this.rowDrop()
  },
  methods: {
    rowDrop() {
      const wrapper = document.querySelector('.el-table__header-wrapper tr')
      new Sortable(wrapper, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.columns[evt.oldIndex]
          this.columns.splice(evt.oldIndex, 1)
          this.columns.splice(evt.newIndex, 0, oldItem)
        }
      })
    }
  }
}
</script>