element-plus-table-dragable

A directive what used sortablejs to add drag support for element-plus's table component base on vue3.

Useage

1<template>
2    <el-table 
3        v-dragable="dragOptions" 
4        :data="data"
5    >
6    </el-table>
7</template>
8
9<script setup>
10import { vDragable } from "element-plus-table-dragable"; 
11
12const dragOptions = [
13    {
14        selector: "thead tr", // add drag support for column
15        option: { // sortablejs's option
16            animation: 150,
17            onEnd: (evt) => {
18                /* you can define a 'columns' ref 
19                and use v-for render it in table's slot. 
20                then you can change index of the item in 'column' here 
21                to implement drag column to sort */
22                console.log(evt.oldIndex, evt.newIndex);
23            },
24        },
25    },
26    {
27        selector: "tbody", // add drag support for row
28        option: { // sortablejs's option
29            animation: 150,
30            onEnd: (evt) => {
31                console.log(evt.oldIndex, evt.newIndex);
32            },
33        },
34    },
35];
36</script>