VUE +el-table+sortable.js实现拖拽表格table排序，实现行排序，列排序(踩坑提醒)

最新推荐文章于 2025-11-17 09:41:30 发布

原创

最新推荐文章于 2025-11-17 09:41:30 发布 · 1.6k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html #javascript

本文介绍了如何在Vue项目中结合Element UI和sortable.js实现表格的行和列拖拽排序功能。通过在Vue组件中引入sortablejs插件，并设置row-key，实现了拖拽排序的效果。同时提醒注意安装正确版本的插件以及在HTML和methods中配置相关代码。

Sortable.js是一款轻量级的拖放排序列表的js插件（虽然体积小，但是功能很强大）
项目需求是要求能对element中的table进行拖拽行排序

这里用到了sorttable

Sortable.js是一款轻量级的拖放排序列表的js插件（虽然体积小，但是功能很强大）

官方Demo：http://rubaxa.github.io/Sortable/

安装步骤,注意安装的是sortablejs,别安装成其他的,也是不行的

npm install sortablejs --save

在.vue中的js部分（需要用到sorttable的vue文件中）引入也可以在main.js中引入注册到Vue的根实例中

import Sortable from 'sortablejs'

HTML部分,这里注意,给el-table加上 row-key=“id”,否则拖动也无效

<el-table :data="tableData"
                      border
                      width="100%"
                      row-key="id"
                      align="left"
                      v-show="showDictItem">
                      <el-table-column width="50px">
                          <template slot-scope="scope">
                              <el-button type='text' v-show="scope.row.defaultValue === 1">默认</el-button>
                          </template>
                      </el-table-column>
                      <el-table-column
                          width

最低0.47元/天解锁文章