el-table行拖拽排序效果的实现（基于sortablejs）

墨蓝 2024-04-01 17:01 90阅读 0赞

### 前言 ###

ElementUI中的`Table`组件对于展示数据来说，有着不可替代的作用。但是也有一点点小缺陷，比如行不支持拖拽效果。  
当然我们可以借助于第三方库来实现行拖拽效果。

### 实现方法 ###

实现拖拽效果需要借助于`sortablejs`库来实现。  
GitHub：[https://github.com/SortableJS/Sortable][https_github.com_SortableJS_Sortable]  
中文网站(无法验证是否为官方网店)：[http://www.sortablejs.com/][http_www.sortablejs.com]  
`sortablejs`有以下优点（摘至部分readme文档）：

> 1.  Supports touch devices and modern browsers (including IE9) 支持大部分触屏设备及现代浏览器（包括IE9）
> 2.  Can drag from one list to another or within the same list 支持列内拖动及列间拖动
> 3.  CSS animation when moving items 支持拖动时动画效果
> 4.  Multi-drag support 支持同时拖动多个
> 5.  Built using native HTML5 drag and drop API 根据原生Html5 drag和drop API穿件
> 6.  支持多种框架（Meteor、Angular、React、Knockout、Ploymer、Vue、Ember）
> 7.  等等其他。。。

#### 安装sortablejs ####

npm方式:

$ npm install sortablejs --save

#### 使用 ####

1.  普通`el-table`代码如下：

<template>
      <el-table
        :data="tableData"
        border
        row-key="date"
        style="width: 100%"
      >
        <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>
    
    export default {
          
      data() {
          
        return {
          
          tableData: [
            {
          
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
          
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄",
            },
            {
          
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
            },
            {
          
              date: "2016-05-04",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄",
            },
          ],
        };
      },
    };
    </script>

1.  引入`sortablejs`组件：

<template>
      
      <el-table
        :data="tableData"
        border
        row-key="date"
        class="draggable-table"
        style="width: 100%"
      >
        <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>
    import Sortable from "sortablejs";
    
    export default {
          
      data() {
          
        return {
          
          tableData: [
            // 略去数据，与前段代码一直
          ],
        };
      },
      mounted() {
          
        // 需要支持拖动效果的列表容器，在这里我们设置为el-table组件的tbody，
        // 注意：最前面的一段为前面el-table的class: draggable-table，主要为了防止如果页面有多个table，多个table同时实现拖拽效果
        // 当然，如果多个table都需要拖拽效果，选择器中最前面的.draggable-table可以去除。
        const tbody = document.querySelector(".draggable-table .el-table__body-wrapper tbody");
        new Sortable(tbody, {
          
          animation: 150,
          // 需要在odEnd方法中处理原始eltable数据，使原始数据与显示数据保持顺序一致
          onEnd: ({
            newIndex, oldIndex }) => {
          
            const targetRow = this.tableData[oldIndex];
            this.tableData.splice(oldIndex, 1);
            this.tableData.splice(newIndex, 0, targetRow);
            console.table(this.tableData);
          },
        });
      },
    };
    </script>
    <style scoped>
    </style>

至此，拖拽效果就已完成，具体效果如下：  
![在这里插入图片描述][0fd5a4052145417dac0258e4c637ba01.gif_pic_center]

详细代码请移步至：[https://codesandbox.io/s/el-table-drag-row-qj1ws7][https_codesandbox.io_s_el-table-drag-row-qj1ws7]

### 后记 ###

如有疑问，可以在评论区进行交流。也欢迎点赞⭐收藏 ：）

**拓展阅读：**

1.  [React + Router + Antd实现多标签页功能（具体代码实现）][React _ Router _ Antd]
2.  [几款常用的表单设计器解决方案][Link 1]
3.  [React + Antd实现动态切换主题功能][React _ Antd]

[https_github.com_SortableJS_Sortable]: https://github.com/SortableJS/Sortable
[http_www.sortablejs.com]: http://www.sortablejs.com/
[0fd5a4052145417dac0258e4c637ba01.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/9e02d8ce6b1a40c1907846b786b6494e.gif
[https_codesandbox.io_s_el-table-drag-row-qj1ws7]: https://codesandbox.io/s/el-table-drag-row-qj1ws7
[React _ Router _ Antd]: https://blog.csdn.net/m0_58016522/article/details/127754129
[Link 1]: https://blog.csdn.net/m0_58016522/article/details/127646157
[React _ Antd]: https://blog.csdn.net/m0_58016522/article/details/121751043