feat: pure-admin-table添加单元格编辑表格的简易用法 (#992)

* feat: `pure-admin-table`添加单元格编辑表格的简易用法

locales/zh-CN.yaml

@@ -128,8 +128,8 @@ menus:
   hsSensitive: 敏感词过滤
   hsPinyin: 汉语拼音
   hsdanmaku: 弹幕
-  hsPureTableBase: 基础用法（23个示例）
-  hsPureTableHigh: 高级用法（11个示例）
+  hsPureTableBase: 基础用法
+  hsPureTableHigh: 高级用法
   hsPureTableEdit: 可编辑用法
   hsboard: 艺术画板
   hsMenuoverflow: 目录超出显示 Tooltip 文字提示

src/views/pure-table/edit/data.ts

@@ -1,23 +1,27 @@
 const tableData = [
   {
+    id: 1,
     name: "Tom",
     sex: 0, // 0代表男 1代表女
     hobby: 2,
     date: "2024-03-17"
   },
   {
+    id: 2,
     name: "Jack",
     sex: 0,
     hobby: 1,
     date: "2024-03-18"
   },
   {
+    id: 3,
     name: "Lily",
     sex: 1,
     hobby: 1,
     date: "2024-03-19"
   },
   {
+    id: 4,
     name: "Mia",
     sex: 1,
     hobby: 3,
@@ -44,4 +48,27 @@ const options = [
   }
 ];
 
-export { tableData, options };
+const tableDataEdit = [
+  {
+    id: 1,
+    name: "Tom",
+    address: "home"
+  },
+  {
+    id: 2,
+    name: "Jack",
+    address: "office"
+  },
+  {
+    id: 3,
+    name: "Lily",
+    address: "library"
+  },
+  {
+    id: 4,
+    name: "Mia",
+    address: "playground"
+  }
+];
+
+export { tableData, tableDataEdit, options };

src/views/pure-table/edit/demo1/index.vue

@@ -10,9 +10,9 @@ const { columns, dataList, onAdd, onDel } = useColumns();
 
 <template>
   <div class="flex">
-    <el-scrollbar height="700px">
+    <el-scrollbar height="540px">
       <code>
-        <pre class="w-[700px]"> {{ dataList }}</pre>
+        <pre class="w-[400px]"> {{ dataList }}</pre>
       </code>
     </el-scrollbar>
     <pure-table

src/views/pure-table/edit/demo2/index.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import { toRefs } from "vue";
 import { useColumns } from "./columns";
 
 const { editMap, columns, dataList, onEdit, onSave, onCancel } = useColumns();
 </script>
 
 <template>
   <div class="flex">
-    <el-scrollbar height="700px">
+    <el-scrollbar>
       <code>
-        <pre class="w-[700px]"> {{ dataList }}</pre>
+        <pre class="w-[400px]"> {{ dataList }}</pre>
       </code>
     </el-scrollbar>
     <pure-table

src/views/pure-table/edit/demo3/columns.tsx

@@ -0,0 +1,87 @@
+import { ref, computed } from "vue";
+import { tableDataEdit } from "../data";
+
+import EditPen from "@iconify-icons/ep/edit-pen";
+import Check from "@iconify-icons/ep/check";
+
+export function useColumns() {
+  const editMap = ref({});
+  const activeIndex = ref(-1);
+  const dataList = ref(tableDataEdit);
+
+  const editing = computed(() => {
+    return index => {
+      return editMap.value[index]?.editing;
+    };
+  });
+
+  const iconClass = computed(() => {
+    return (index, other = false) => {
+      return [
+        "cursor-pointer",
+        "ml-2",
+        "transition",
+        "delay-100",
+        other
+          ? ["hover:scale-110", "hover:text-red-500"]
+          : editing.value(index) && ["scale-150", "text-red-500"]
+      ];
+    };
+  });
+
+  const columns: TableColumnList = [
+    {
+      label: "姓名（可修改）",
+      prop: "name",
+      cellRenderer: ({ row, index }) => (
+        <div
+          class="flex-bc w-full h-[32px]"
+          onMouseenter={() => (activeIndex.value = index)}
+          onMouseleave={() => onMouseleave(index)}
+        >
+          {!editing.value(index) ? (
+            <p>{row.name}</p>
+          ) : (
+            <>
+              <el-input v-model={row.name} />
+              <iconify-icon-offline
+                icon={Check}
+                class={iconClass.value(index)}
+                onClick={() => onSave(index)}
+              />
+            </>
+          )}
+          <iconify-icon-offline
+            v-show={activeIndex.value === index && !editing.value(index)}
+            icon={EditPen}
+            class={iconClass.value(index, true)}
+            onClick={() => onEdit(row, index)}
+          />
+        </div>
+      )
+    },
+    {
+      label: "地址",
+      prop: "address"
+    }
+  ];
+
+  function onMouseleave(index) {
+    editing.value[index]
+      ? (activeIndex.value = index)
+      : (activeIndex.value = -1);
+  }
+
+  function onEdit(row, index) {
+    editMap.value[index] = Object.assign({ ...row, editing: true });
+  }
+
+  function onSave(index) {
+    editMap.value[index].editing = false;
+  }
+
+  return {
+    columns,
+    dataList
+  };
+}

src/views/pure-table/edit/demo3/index.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+
+const { columns, dataList } = useColumns();
+</script>
+
+<template>
+  <div class="flex">
+    <el-scrollbar>
+      <code>
+        <pre class="w-[400px]"> {{ dataList }}</pre>
+      </code>
+    </el-scrollbar>
+    <pure-table
+      class="!w-[30vw]"
+      row-key="id"
+      border
+      :data="dataList"
+      :columns="columns"
+    />
+  </div>
+</template>

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

@@ -1,5 +1,6 @@
 import Demo1 from "./demo1/index.vue";
 import Demo2 from "./demo2/index.vue";
+import Demo3 from "./demo3/index.vue";
 
 const rendContent = (val: string) =>
   `代码位置：src/views/pure-table/edit/${val}/index.vue`;
@@ -16,5 +17,11 @@ export const list = [
     content: rendContent("demo2"),
     title: "单行编辑",
     component: Demo2
+  },
+  {
+    key: "demo3",
+    content: rendContent("demo3"),
+    title: "单元格编辑",
+    component: Demo3
   }
 ];

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

@@ -4,7 +4,6 @@ import RowDrag from "./drag/row/index.vue";
 import ColumnDrag from "./drag/column/index.vue";
 import Contextmenu from "./contextmenu/index.vue";
 import Excel from "./excel/index.vue";
-import Edit from "./edit/index.vue";
 import Watermark from "./watermark/index.vue";
 import Print from "./prints/index.vue";
 import Echarts from "./echarts/index.vue";
@@ -50,12 +49,6 @@ export const list = [
     title: "右键菜单",
     component: Contextmenu
   },
-  {
-    key: "edit",
-    content: rendContent("edit"),
-    title: "单元格修改",
-    component: Edit
-  },
   {
     key: "excel",
     content: rendContent("excel"),