el-table 表格行拖动 sortable.js

最新推荐文章于 2025-03-28 13:35:03 发布

暖ping

最新推荐文章于 2025-03-28 13:35:03 发布

阅读量846

点赞数 1

分类专栏： vue el-table 拖动

本文链接：https://blog.youkuaiyun.com/JinPingQ/article/details/113563516

版权

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

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

首先拖动使用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:[

最低0.47元/天解锁文章