在vue3 setup下基于Ant Design Vue 实现一个可拖拽行的表格

拖拽表格

1、使用原生的drag事件
2、使用ant design vue Table的customRow属性

<script setup>
import { ref } from "vue";

const dataSource = ref([
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
  },
  { key: "2", name: "Jim Green", age: 42, address: "London No. 1 Lake Park" },
  { key: "3", name: "Joe Black", age: 32, address: "Sidney No. 1 Lake Park" },
]);

const columns = ref([
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
  },
]);

const onDragEnd = (result) => {
  if (!result.destination) return;
  const items = Array.from(dataSource.value);
  const [reorderedItem] = items.splice(result.source.index, 1);
  items.splice(result.destination.index, 0, reorderedItem);
  dataSource.value = items;
};

const customRow = (_record, index) => {
  return {
    draggable: true,
    ondragstart: (event) => {
      // 设置拖放行的索引
      event.dataTransfer.setData("text/plain", index);
    },
    ondragover: (event) => {
      event.preventDefault();
    },
    ondrop: (event) => {
      // 获取拖放行的索引
      event.preventDefault();
      const fromIndex = event.dataTransfer.getData("text/plain");
      const toIndex = index;
      onDragEnd({
        source: { index: +fromIndex },
        destination: { index: +toIndex },
      });
    },
  };
};
</script>

<template>
  <a-table
    :dataSource="dataSource"
    :columns="columns"
    rowKey="key"
    :customRow="customRow"
  >
    <template #headerCell="scope">
      <slot name="headerCell" :scope="scope"></slot>
    </template>
    <template #bodyCell="{ record, column }">
      <template v-if="column.dataIndex === 'name'">{{ record.name }}</template>
      <template v-if="column.dataIndex === 'age'">{{ record.age }}</template>
      <template v-if="column.dataIndex === 'address'">{{
        record.address
      }}</template>
    </template>
  </a-table>
</template>