element-ui el-table 拖拽排序

vue3 elementui-plus table 拖拽排序

在vue3中 element ui-plus 表格拖拽排序，我使用的是 sortablejs 实现的表格拖拽排序

前言

当使用 element el-table 表格组件，需要完成拖拽排序时，可以使用一个强大的js拖拽库 SortableJS
更详细的使用文档 sortable.js中文文档
该js拖拽库配置很简单，同样也很容易上手，官网提供了很多拖拽demo

效果图

一、安装

安装方式分为三种
1、npm安装

npm install sortablejs --save

2、Bower安装

bower install --save sortablejs

3、yarn安装

yarn add sortablejs --save

4、JavaScript导入

<script src="https://www.itxst.com/package/sortable/sortable.min.js"></script>

二、使用

1、首先在自己的项目中安装 sortablejs (我使用的是yarn)

    执行：yarn add sortablejs --save

2、在需要使用拖拽排序的==.vue==页面引入 sortablejs

    import Sortablejs from 'sortablejs'

三、代码示例

template 部分

<template>
  <el-table class='tables' :data="tableData" style="width: 100%" row-key="id">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

**注意：**需要在 el-table 中添加一个class来选择该表格，并且需要给el-table设置row-key唯一标识，如果没有的话可能会导致排序异常。
scriipt 部分

<script setup>
import { onMounted, ref } from 'vue';
// 引入 sortablejs 插件库
import Sortable from 'sortablejs' 

// 因为要用原生js获取dom，如果不写在onMounted生命周期中可能会导致在页面加载的时候获取DOM，此时DOM还没有加载完成，导致报错
onMounted(()=>{
    // 获取el-table DOM
    const el = document.querySelector('.tables .el-table__body-wrapper  table tbody')
    // 
    Sortable.create(el, {
        animation: 150,
        ghostClass: 'blue-background-class',
        handle: '.drag_btn', // 如果需要点击某个图标拖拽的话需要吧那个图标的class写在这里
        // 写完以上部分就已经可以实现基本的拖拽功能了，以下是拓展
        //始拖拽事件
        onEnd: function (/**Event*/evt) {
            let newIndex = evt.newIndex  // 排序后的索引位置
            let oldIndex = evt.oldIndex  // 排序前的索引位置
            var itemEl = evt.item;  // 拖拽 HTMLElement
            evt.to;    // 目标表
            evt.from;  // 上一个列表
            evt.oldIndex;  // 元素在旧父级中的旧索引
            evt.newIndex;  // 元素在新父级中的新索引
            evt.clone // 克隆元件
            evt.pullMode;  // 当项目在另一个可排序表中时：`“clone”`如果克隆，`true`如果移动
        },
        //点击选中元素事件
        onChoose: function (/**Event*/evt) { 
            evt.oldIndex; 
        }, 
        //取消选中事件
        onUnchoose: function (/**Event*/evt) {
        },
    })
})
// 假数据
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    id:1
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    id:2
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    id:3
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    id:4
  },
]
</script>

三、options配置项以及事件方法

const sortable = new Sortable(el,options)

el是获取到的根DOM，options是sortable配置项，具体配置详情查看 Sortablejs 配置文档 如果有把当前块中的拖拽到其他块中，详情可以查看 sortable.js中文文档

如果在使用中遇到问题欢迎留言，或者私信