当前位置：首页 > VUE

vue实现表格行移动

2026-02-23 08:50:24VUE

实现表格行移动的方法

在Vue中实现表格行移动功能，可以通过多种方式完成。以下是几种常见的实现方法：

使用拖拽库实现

安装vuedraggable库可以快速实现拖拽排序功能：

npm install vuedraggable

在组件中使用：

<template>
  <draggable v-model="tableData" tag="tbody" @end="onDragEnd">
    <tr v-for="(item, index) in tableData" :key="item.id">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 }
      ]
    }
  },
  methods: {
    onDragEnd() {
      // 拖拽结束后可以执行的操作
      console.log('新顺序:', this.tableData)
    }
  }
}
</script>

自定义拖拽实现

如果不希望使用第三方库，可以手动实现拖拽功能：

<template>
  <table>
    <tbody>
      <tr 
        v-for="(item, index) in tableData" 
        :key="item.id"
        draggable="true"
        @dragstart="dragStart(index)"
        @dragover.prevent="dragOver(index)"
        @drop="drop(index)"
      >
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 }
      ],
      draggedIndex: null
    }
  },
  methods: {
    dragStart(index) {
      this.draggedIndex = index
    },
    dragOver(index) {
      if (this.draggedIndex !== index) {
        const draggedItem = this.tableData[this.draggedIndex]
        this.tableData.splice(this.draggedIndex, 1)
        this.tableData.splice(index, 0, draggedItem)
        this.draggedIndex = index
      }
    },
    drop() {
      this.draggedIndex = null
    }
  }
}
</script>

使用上下移动按钮实现

对于不需要拖拽的场景，可以使用按钮控制行移动：

<template>
  <table>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>
          <button @click="moveUp(index)" :disabled="index === 0">上移</button>
          <button @click="moveDown(index)" :disabled="index === tableData.length - 1">下移</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 25 },
        { id: 2, name: 'Jane', age: 30 }
      ]
    }
  },
  methods: {
    moveUp(index) {
      if (index > 0) {
        const temp = this.tableData[index - 1]
        this.$set(this.tableData, index - 1, this.tableData[index])
        this.$set(this.tableData, index, temp)
      }
    },
    moveDown(index) {
      if (index < this.tableData.length - 1) {
        const temp = this.tableData[index + 1]
        this.$set(this.tableData, index + 1, this.tableData[index])
        this.$set(this.tableData, index, temp)
      }
    }
  }
}
</script>