element-plus表格组件拖拽插件

插件地址：www.npmjs.com/package/ele…

• 完整示例

<template>
  <div class="ff">
    <el-table
        v-dragable="dragOptions"
        :data="info.tableData"
        border
        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>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { vDragable } from "element-plus-table-dragable";

const dragOptions = [
  {
    selector: "thead tr", // add drag support for column
    option: { // sortablejs's option
      animation: 150,
      onEnd: (evt) => {
        /* you can define a 'columns' ref 
        and use v-for render it in table's slot. 
        then you can change index of the item in 'column' here 
        to implement drag column to sort */
        console.log(evt.oldIndex, evt.newIndex);
      },
    },
  },
  {
    selector: "tbody", // add drag support for row
    option: { // sortablejs's option
      animation: 150,
      onEnd: (evt) => {
        console.log(evt.oldIndex, evt.newIndex);
      },
    },
  },
]
const info = reactive({
  tableData: [{
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  }, {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄'
  }, {
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1519 弄'
  }, {
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄'
  }]
})
</script>

<style lang="scss">
.ff .cell{
  color: #000!important;
}
</style>