feat: 添加虚拟表格示例 (#1007)

* feat: 添加虚拟表格示例

src/views/table/high/drag/row/columns.tsx

@@ -0,0 +1,70 @@
+import Sortable from "sortablejs";
+import { ref, nextTick } from "vue";
+import { clone } from "@pureadmin/utils";
+import { tableDataDrag } from "../../data";
+
+// 行拖拽演示
+export function useColumns() {
+  const dataList = ref(clone(tableDataDrag, true));
+
+  const rowDrop = (event: { preventDefault: () => void }) => {
+    event.preventDefault();
+    nextTick(() => {
+      const wrapper: HTMLElement = document.querySelector(
+        ".el-table__body-wrapper tbody"
+      );
+      Sortable.create(wrapper, {
+        animation: 300,
+        handle: ".drag-btn",
+        onEnd: ({ newIndex, oldIndex }) => {
+          const currentRow = dataList.value.splice(oldIndex, 1)[0];
+          dataList.value.splice(newIndex, 0, currentRow);
+        }
+      });
+    });
+  };
+
+  const columns: TableColumnList = [
+    // {
+    //   width: 60,
+    //   cellRenderer: () => (
+    //     <iconify-icon-online
+    //       icon="icon-park-outline:drag"
+    //       class="drag-btn cursor-grab"
+    //       onMouseenter={(event: { preventDefault: () => void }) =>
+    //         rowDrop(event)
+    //       }
+    //     />
+    //   )
+    // },
+    {
+      label: "ID",
+      prop: "id",
+      cellRenderer: ({ row }) => (
+        <div class="flex items-center">
+          <iconify-icon-online
+            icon="icon-park-outline:drag"
+            class="drag-btn cursor-grab"
+            onMouseenter={(event: { preventDefault: () => void }) =>
+              rowDrop(event)
+            }
+          />
+          <p class="ml-[16px]">{row.id}</p>
+        </div>
+      )
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    }
+  ];
+
+  return {
+    columns,
+    dataList
+  };
+}