feat: 新增 @pureadmin/table 右键菜单示例

src/views/pure-table/high/contextmenu/columns.tsx

@@ -0,0 +1,70 @@
+import { ref } from "vue";
+import { tableDataDrag } from "../data";
+import { clone } from "@pureadmin/utils";
+import { message } from "@pureadmin/components";
+import { CustomMouseMenu } from "@howdyjs/mouse-menu";
+
+export function useColumns() {
+  const dataList = ref(clone(tableDataDrag, true));
+
+  const columns: TableColumnList = [
+    {
+      label: "ID",
+      prop: "id"
+    },
+    {
+      label: "日期",
+      prop: "date"
+    },
+    {
+      label: "姓名",
+      prop: "name"
+    }
+  ];
+
+  // 配置参考：https://kongfandong.cn/howdy/mouse-menu/readme
+  const menuOptions = {
+    menuList: [
+      {
+        label: ({ id }) => `ID为：${id}`,
+        disabled: true
+      },
+      {
+        label: "编辑",
+        tips: "Edit",
+        fn: row =>
+          message.success(
+            `您编辑了第 ${
+              dataList.value.findIndex(v => v.id === row.id) + 1
+            } 行，数据为：${JSON.stringify(row)}`
+          )
+      }
+    ]
+  };
+
+  function showMouseMenu(row, column, event) {
+    event.preventDefault();
+    const { x, y } = event;
+    const ctx = CustomMouseMenu({
+      el: event.currentTarget,
+      params: row,
+      // 菜单容器的CSS设置
+      menuWrapperCss: {
+        background: "var(--el-bg-color)"
+      },
+      menuItemCss: {
+        labelColor: "var(--el-text-color)",
+        hoverLabelColor: "var(--el-color-primary)",
+        hoverTipsColor: "var(--el-color-primary)"
+      },
+      ...menuOptions
+    });
+    ctx.show(x, y);
+  }
+
+  return {
+    columns,
+    dataList,
+    showMouseMenu
+  };
+}

src/views/pure-table/high/contextmenu/index.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const { columns, dataList, showMouseMenu } = useColumns();
+</script>
+
+<template>
+  <pure-table
+    row-key="id"
+    border
+    :data="dataList"
+    :columns="columns"
+    @row-contextmenu="showMouseMenu"
+  />
+</template>

src/views/pure-table/high/drag/column/columns.tsx

@@ -1,10 +1,11 @@
 import Sortable from "sortablejs";
+import { clone } from "@pureadmin/utils";
 import { tableDataDrag } from "../../data";
 import { ref, nextTick, onMounted } from "vue";
 
-// 行拖拽演示
+// 列拖拽演示
 export function useColumns() {
-  const dataList = ref(tableDataDrag);
+  const dataList = ref(clone(tableDataDrag, true));
 
   const columnsDrag = ref<TableColumnList>([
     {

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

@@ -1,10 +1,11 @@
 import Sortable from "sortablejs";
 import { ref, nextTick } from "vue";
+import { clone } from "@pureadmin/utils";
 import { tableDataDrag } from "../../data";
 
 // 行拖拽演示
 export function useColumns() {
-  const dataList = ref(tableDataDrag);
+  const dataList = ref(clone(tableDataDrag, true));
 
   const rowDrop = (event: { preventDefault: () => void }) => {
     event.preventDefault();

src/views/pure-table/high/list.tsx

@@ -1,5 +1,6 @@
 import RowDrag from "./drag/row/index.vue";
 import ColumnDrag from "./drag/column/index.vue";
+import Contextmenu from "./contextmenu/index.vue";
 
 const rendContent = (val: string) =>
   `代码位置：src/views/pure-table/high/${val}/index.vue`;
@@ -16,5 +17,11 @@ export const list = [
     content: rendContent("drag/column"),
     title: "拖拽表格（列拖拽）",
     component: ColumnDrag
+  },
+  {
+    key: "contextmenu",
+    content: rendContent("contextmenu"),
+    title: "右键菜单",
+    component: Contextmenu
   }
 ];