vxe-table实现表格行拖拽

方式一：vex-table + sortablejs

1.插件文档
vex-table：https://vxetable.cn/v3/#/table/base/basic
sortablejs: http://www.sortablejs.com/

2.引入插件
vxe-table：

import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

Vue.use(VXETable)

sortablejs：

import Sortable from "sortablejs";

3.核心拖拽函数

rowDrop() {
      this.$nextTick(() => {
        let xTable = this.$refs.xTable;
        this.sortable = Sortable.create(
          xTable.$el.querySelector(".body--wrapper>.vxe-table--body tbody"),
          {
            handle: ".vxe-body--row",
            animation: 150,
            onEnd: ({ newIndex, oldIndex }) => { // 拖拽后回调
	            /*
	            常规想法
				此方法数组处理正常，但表格渲染顺序有问题
	            */
				// let currRow = this.tableData.splice(oldIndex, 1)[0];
	            // this.tableData.splice(newIndex, 0, currRow);
           
             // 解决方案
              this.tableData.splice(newIndex, 0, this.tableData.splice(oldIndex, 1)[0]);
              var newArray = this.tableData.slice(0);
              this.tableData = [];
              this.$nextTick(function () {
                this.tableData = newArray;
              });
            },
          }
        );
      });
    },

渲染问题解决方法链接：sortablejs拖拽列表渲染问题

4.全代码

<template>
  <div>
    <vxe-table
      ref="xTable"
      resizable
      show-overflow
      :data="tableData"
      :edit-config="{ trigger: 'click', mode: 'row', icon: ' ' }"
    >
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="name" title="姓名"> </vxe-column>
      <vxe-column field="sex" title="性别" :edit-render="{}"> </vxe-column>
      <vxe-column title="操作" width="160"> </vxe-column>
    </vxe-table>
  </div>
</template>

<script>
import Sortable from "sortablejs";
export default {
  data() {
    return {
      tableData: [
        { id: 10001, name: "张三", sex: "男" },
        { id: 10002, name: "李四", sex: "男" },
        { id: 10003, name: "王五", sex: "男" },
      ],
    };
  },
  mounted() {
    this.rowDrop();
  },
  beforeDestroy() {
    if (this.sortable) {
      this.sortable.destroy();
    }
  },
  methods: {
    // 行拖动
    rowDrop() {
      this.$nextTick(() => {
        let xTable = this.$refs.xTable;
        this.sortable = Sortable.create(
          xTable.$el.querySelector(".body--wrapper>.vxe-table--body tbody"),
          {
            handle: ".vxe-body--row",
            animation: 150,
            onEnd: ({ newIndex, oldIndex }) => {
              this.tableData.splice(newIndex, 0, this.tableData.splice(oldIndex, 1)[0]);
              var newArray = this.tableData.slice(0);
              this.tableData = [];
              this.$nextTick(function () {
                this.tableData = newArray;
              }); 
            },
          }
        );
      });
    },
  },
};
</script>

方式二：ant+sortablejs

全代码

<template>
  <a-table ref="xTable" :columns="columns" :data-source="tableData"></a-table>
</template>

<script>
import Sortable from "sortablejs";
const columns = [
  {
    title: '#',
    key: 'index',
    customRender(text,row,index){
      return index+1
    }
  },
  {
    title: 'name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'age',
    dataIndex: 'age',
    key: 'age',
  }
];

const tableData = [
  { name: "张三", status: "1" },
  { name: "李四", status: "1" },
  { name: "王五", status: "0" },
];
export default {
  data() {
    return {
      columns,
      tableData
    };
  },
  mounted() {
    this.rowDrop();
  },
  methods: {
    // 行拖动
    rowDrop() {
        let xTable = this.$refs.xTable;
        this.sortable = Sortable.create(
          xTable.$el.querySelector(".ant-table-wrapper .ant-table-content>.ant-table-body .ant-table-tbody"),
          {
            handle: ".ant-table-row",
            animation: 200,
            onEnd: ({ newIndex, oldIndex }) => {
              this.tableData.splice(newIndex, 0, this.tableData.splice(oldIndex, 1)[0]);
              var newArray = this.tableData.slice(0);
              this.tableData = [];
              this.$nextTick(function () {
                this.tableData = newArray;
              });
            },
          }
        );
    }
  },
};
</script>