VUE3+Ts 基于Element+sorttable.js写可以拖动列和行的表格

1、首先要引入sorttable.js

 import Sortable from 'sortablejs';

2、重新下载一下依赖

npm install sortablejs --save-dev

3、HTML中写

<el-table :data="tableDatas" border row-key="id" align="left">

        <el-table-column

          v-for="(item, index) in col"

          :key="`col_${index}`"

          :prop="dropCol[index].prop"

          :label="item.label"

        >

        </el-table-column>

      </el-table>

4、调用方法( 因为我是弹出框里面的表格,所以在打开弹出框的时候调用行和列的拖拽方法，正常在onMounted的中调用即可 )。

  setTimeout(() => {

        rowDrop();

        columnDrop();

      }, 1000);

5、在onMounted里面调用阻止默认行为的方法

// 阻止默认行为

    document.body.ondrop = function (event) {

      event.preventDefault();

      event.stopPropagation();

    };

6、定义表格内容数据

  interface T {

    col?: any;

    tableDatas?: any;

    dropCol?: any;

  }

  const state = reactive<T>({

    col: [

      {

        label: '日期',

        prop: 'date',

      },

      {

        label: '姓名',

        prop: 'name',

      },

      {

        label: '地址',

        prop: 'address',

      },

    ],

    dropCol: [

      {

        label: '日期',

        prop: 'date',

      },

      {

        label: '姓名',

        prop: 'name',

      },

      {

        label: '地址',

        prop: 'address',

      },

    ],

    tableDatas: [

      {

        id: '1',

        date: '2016-05-02',

        name: '王小虎1',

        address: '上海市普陀区金沙江路 100 弄',

      },

      {

        id: '2',

        date: '2016-05-04',

        name: '王小虎2',

        address: '上海市普陀区金沙江路 200 弄',

      },

      {

        id: '3',

        date: '2016-05-01',

        name: '王小虎3',

        address: '上海市普陀区金沙江路 300 弄',

      },

      {

        id: '4',

        date: '2016-05-03',

        name: '王小虎4',

        address: '上海市普陀区金沙江路 400 弄',

      },

    ],

  });

// 抛出数据

const { col, dropCol, tableDatas } = toRefs(state);

7、调用获取行和列拖拽的方法

  //行拖拽

  function rowDrop() {

    const tbody = document.querySelector('.el-table__body tbody');

    Sortable.create(tbody, {

      onEnd({ newIndex, oldIndex }) {

        setTimeout(() => {

          const currRow = state.tableDatas.splice(oldIndex, 1)[0];

          state.tableDatas.splice(newIndex, 0, currRow);

        }, 5);

      },

    });

  }

  //列拖拽

  function columnDrop() {

    const wrapperTr = document.querySelector('.el-table tr');

    Sortable.create(wrapperTr, {

      // ms, number 单位：ms，定义排序动画的时间

      animation: 180,

      // number 定义鼠标选中列表单元可以开始拖动的延迟时间；

      delay: 0,

      onEnd: (evt) => {

        setTimeout(() => {

          const oldItem = state.dropCol[evt.oldIndex];

          state.dropCol.splice(evt.oldIndex, 1);

          state.dropCol.splice(evt.newIndex, 0, oldItem);

        }, 5);

      },

    });

  }

参考资料:

Sortable.js中文网|配置

element-ui table 表格组件实现可拖拽效果（行、列）_Eliano的博客-CSDN博客_element table 可拖拽