Vue实战（四）：实现普通表格的行拖拽

本文链接：https://blog.csdn.net/weixin_46175652/article/details/130857770

该文章介绍了如何在Vue项目中结合ElementUI和SortableJS库来实现表格行的拖拽功能。首先，安装SortableJS依赖，然后在ElementUI的表格组件上设置row-key属性。接着，初始化表格数据，并在script部分引入SortableJS，最后编写实现行拖拽的方法，监听拖动结束事件，动态调整数据顺序，从而达到拖拽效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue实战（四）：实现普通表格的行拖拽

1、依赖安装

npm install sortablejs --save

2、功能实现

第一，在ElementUI上找到一个基础的表格。

<template>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
</template>

第二，在el-table的属性上添加row-key

<template>
    <el-table row-key="date" :data="tableData" style="width: 100%" border>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
</template>

第三，在script里面引入Sortable

import Sortable from 'sortablejs'

第四，初始化表格数据

tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]

第五，编写实现行拖拽的方法

const table = document.querySelector('.el-table__body-wrapper tbody')
    const self = this
    Sortable.create(table, {
      onEnd({ newIndex, oldIndex }) {
        const targetRow = self.tableData.splice(oldIndex, 1)[0]
        self.tableData.splice(newIndex, 0, targetRow)
      }
    })