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

前言

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

实现方法

实现拖拽效果需要借助于sortablejs库来实现。
GitHub：https://github.com/SortableJS/Sortable
中文网站(无法验证是否为官方网店)：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>

2. 引入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>

至此，拖拽效果就已完成，具体效果如下：

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

后记

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

拓展阅读：

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