Realization of el-table row drag and drop sorting effect (based on sortablejs)

foreword

The components in ElementUI Tableplay an irreplaceable role in displaying data. But there are also some small flaws, such as the row does not support drag and drop effects.
Of course, we can use third-party libraries to achieve row dragging effects.

Implementation

To achieve the drag and drop effect, you need to use sortablejsa library to achieve it.
GitHub: https://github.com/SortableJS/Sortable
Chinese website (unable to verify whether it is an official online store): http://www.sortablejs.com/
sortablejs has the following advantages (extracted from some readme documents):

Supports touch devices and modern browsers (including IE9) supports most touch devices and modern browsers (including IE9)

Can drag from one list to another or within the same list Supports dragging within and between columns

CSS animation when moving items supports animation effects when dragging

Multi-drag support supports dragging multiple

Built using native HTML5 drag and drop API according to native Html5 drag and drop API

Supports multiple frameworks (Meteor, Angular, React, Knockout, Ploymer, Vue, Ember)

and so on. . .

install sortablejs

npm way:

$ npm install sortablejs --save

use

The normal el-tablecode is as follows:

<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>

Import sortablejscomponents:

<template>
  <!-- 对eltable设置一个名为draggable-table的class -->
  <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>

So far, the dragging effect has been completed, and the specific effect is as follows:
insert image description here

For detailed code, please move to: https://codesandbox.io/s/el-table-drag-row-qj1ws7

postscript

If you have any questions, you can communicate in the comment area. Also welcome to like ⭐Favorites :)

Further reading: