el-table 表格行拖动 sortable.js

最新推荐文章于 2025-11-15 03:31:36 发布

原创

最新推荐文章于 2025-11-15 03:31:36 发布 · 960 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue项目中利用sortable.js实现el-table表格的行拖动功能。通过cdn引入sortable.js，设置html结构，定义data和方法，但初次实现时存在拖动效果与页面显示不一致的问题。最终通过$nextTick解决这个问题，避免了数据与视图同步的坑。

首先拖动使用sortable.js 插件文档 http://www.sortablejs.com/

1、引入js 我选择cdn引入

<script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>

2、html代码

<el-table :data="tableData">
            <el-table-column prop="value" label="表头1"> </el-table-column>
            <el-table-column prop="value" label="表头2"> </el-table-column>
            <el-table-column prop="value" label="表头3"> </el-table-column>
            <el-table-column prop="value" label="表头4"> </el-table-column>
</el-table>

3、data数据方法

data:function(){
      return {
         tableData:[
              {value:'FP20201218001',id:'1'},
              {value:'FP20201218002',id:'2'},
              {value:'FP20201