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

package.json

@@ -54,7 +54,7 @@
     "@logicflow/extension": "^1.2.22",
     "@pureadmin/descriptions": "^1.2.1",
     "@pureadmin/table": "^3.1.2",
-    "@pureadmin/utils": "^2.4.6",
+    "@pureadmin/utils": "^2.4.7",
     "@vueuse/core": "^10.9.0",
     "@vueuse/motion": "^2.1.0",
     "@wangeditor/editor": "^5.1.23",

pnpm-lock.yaml

@@ -24,8 +24,8 @@ dependencies:
     specifier: ^3.1.2
     version: 3.1.2(element-plus@2.6.1)(typescript@5.4.2)
   '@pureadmin/utils':
-    specifier: ^2.4.6
+    specifier: ^2.4.7
-    version: 2.4.6(echarts@5.5.0)(vue@3.4.21)
+    version: 2.4.7(echarts@5.5.0)(vue@3.4.21)
   '@vueuse/core':
     specifier: ^10.9.0
     version: 10.9.0(vue@3.4.21)
@@ -1758,7 +1758,7 @@ packages:
       element-plus: ^2.0.0
     dependencies:
       '@element-plus/icons-vue': 2.3.1(vue@3.4.21)
-      '@pureadmin/utils': 2.4.6(echarts@5.5.0)(vue@3.4.21)
+      '@pureadmin/utils': 2.4.7(echarts@5.5.0)(vue@3.4.21)
       element-plus: 2.6.1(vue@3.4.21)
       vue: 3.4.21(typescript@5.4.2)
     transitivePeerDependencies:
@@ -1785,8 +1785,8 @@ packages:
       string-hash: 1.1.3
     dev: true
 
-  /@pureadmin/utils@2.4.6(echarts@5.5.0)(vue@3.4.21):
+  /@pureadmin/utils@2.4.7(echarts@5.5.0)(vue@3.4.21):
-    resolution: {integrity: sha512-TBN9fJhqrsjATvSHR1tDC4ZCQTvC6zMl2xj76lEJW7/VAX3OtNlb5073BAQBBMg7fXsAUXkMyBTwagsOZM5grg==}
+    resolution: {integrity: sha512-fUHwZm9wEtcxUk//bs8xoDe0XYAeoU/FbvAF9CM4Y5xBmaaXvzN+sSFCUyUKC08q4tmCyaHBeLNolO3I4t3X6Q==}
     peerDependencies:
       echarts: '*'
       vue: '*'

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

@@ -1,68 +1,47 @@
-import dayjs from "dayjs";
-
-const date = dayjs(new Date()).format("YYYY-MM-DD");
-
 const tableData = [
   {
-    date,
     name: "Tom",
     sex: 0, // 0代表男 1代表女
-    hobby: null
+    hobby: 2,
+    date: "2024-03-17"
   },
   {
-    date,
     name: "Jack",
     sex: 0,
-    hobby: null
+    hobby: 1,
+    date: "2024-03-18"
   },
   {
-    date,
+    name: "Lily",
-    name: "Dick",
+    sex: 1,
-    sex: 0,
+    hobby: 1,
-    hobby: null
+    date: "2024-03-19"
   },
   {
-    date,
+    name: "Mia",
-    name: "Harry",
+    sex: 1,
-    sex: 0,
+    hobby: 3,
-    hobby: null
+    date: "2024-03-20"
-  },
-  {
-    date,
-    name: "Sam",
-    sex: 0,
-    hobby: null
-  },
-  {
-    date,
-    name: "Lucy",
-    sex: 0,
-    hobby: null
-  },
-  {
-    date,
-    name: "Mary",
-    sex: 0,
-    hobby: null
-  },
-  {
-    date,
-    name: "Mike",
-    sex: 0,
-    hobby: null
-  },
-  {
-    date,
-    name: "Mike1",
-    sex: 0,
-    hobby: null
-  },
-  {
-    date,
-    name: "Mike2",
-    sex: 0,
-    hobby: null
   }
 ];
 
-export { tableData };
+const options = [
+  {
+    value: 0,
+    label: "上午写代码"
+  },
+  {
+    value: 1,
+    label: "下午写代码"
+  },
+  {
+    value: 2,
+    label: "晚上写代码"
+  },
+  {
+    value: 3,
+    label: "凌晨休息了"
+  }
+];
+
+export { tableData, options };

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

@@ -1,27 +1,9 @@
 import { ref } from "vue";
+import { options } from "../data";
 
 export function useColumns() {
   const dataList = ref([]);
 
-  const options = [
-    {
-      value: 0,
-      label: "上午写代码"
-    },
-    {
-      value: 1,
-      label: "下午写代码"
-    },
-    {
-      value: 2,
-      label: "晚上写代码"
-    },
-    {
-      value: 3,
-      label: "凌晨休息了"
-    }
-  ];
-
   const columns: TableColumnList = [
     {
       label: "姓名",

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

@@ -16,12 +16,12 @@ const { columns, dataList, onAdd, onDel } = useColumns();
       </code>
     </el-scrollbar>
     <pure-table
+      row-key="id"
       align-whole="center"
       :header-cell-style="{
         background: 'var(--el-fill-color-light)',
         color: 'var(--el-text-color-primary)'
       }"
-      row-key="id"
       :data="dataList"
       :columns="columns"
     >
@@ -50,3 +50,9 @@ const { columns, dataList, onAdd, onDel } = useColumns();
     </pure-table>
   </div>
 </template>
+
+<style scoped>
+:deep(.el-table__inner-wrapper::before) {
+  height: 0;
+}
+</style>

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

@@ -0,0 +1,116 @@
+import { ref } from "vue";
+import { tableData, options } from "../data";
+import { clone, delObjectProperty } from "@pureadmin/utils";
+
+export function useColumns() {
+  const editMap = ref({});
+  const dataList = ref(clone(tableData, true));
+
+  const columns: TableColumnList = [
+    {
+      label: "姓名",
+      prop: "name",
+      cellRenderer: ({ row, index }) => (
+        <>
+          {editMap.value[index]?.editable ? (
+            <el-input v-model={row.name} />
+          ) : (
+            <p>{row.name}</p>
+          )}
+        </>
+      )
+    },
+    {
+      label: "性别",
+      prop: "sex",
+      cellRenderer: ({ row, index }) => (
+        <>
+          {editMap.value[index]?.editable ? (
+            <el-switch
+              v-model={row.sex}
+              inline-prompt
+              active-value={0}
+              inactive-value={1}
+              active-text="男"
+              inactive-text="女"
+            />
+          ) : (
+            <p>{row.sex === 0 ? "男" : "女"}</p>
+          )}
+        </>
+      )
+    },
+    {
+      label: "爱好",
+      prop: "hobby",
+      cellRenderer: ({ row, index }) => (
+        <>
+          {editMap.value[index]?.editable ? (
+            <el-select v-model={row.hobby} clearable placeholder="请选择爱好">
+              {options.map(item => {
+                return (
+                  <el-option
+                    key={item.value}
+                    label={item.label}
+                    value={item.value}
+                  />
+                );
+              })}
+            </el-select>
+          ) : (
+            <el-tag type="primary">
+              {options.filter(opt => opt.value == row.hobby)[0]?.label}
+            </el-tag>
+          )}
+        </>
+      )
+    },
+    {
+      label: "日期",
+      prop: "date",
+      cellRenderer: ({ row, index }) => (
+        <>
+          {editMap.value[index]?.editable ? (
+            <el-date-picker
+              v-model={row.date}
+              type="date"
+              format="YYYY/MM/DD"
+              value-format="YYYY-MM-DD"
+              placeholder="请选择日期"
+            />
+          ) : (
+            <p>{row.date}</p>
+          )}
+        </>
+      ),
+      minWidth: 110
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      slot: "operation"
+    }
+  ];
+
+  function onEdit(row, index) {
+    editMap.value[index] = Object.assign({ ...row, editable: true });
+  }
+
+  function onSave(index) {
+    editMap.value[index].editable = false;
+  }
+
+  function onCancel(index) {
+    editMap.value[index].editable = false;
+    dataList.value[index] = delObjectProperty(editMap.value[index], "editable");
+  }
+
+  return {
+    editMap,
+    columns,
+    dataList,
+    onEdit,
+    onSave,
+    onCancel
+  };
+}

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

@@ -0,0 +1,51 @@
+<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">
+      <code>
+        <pre class="w-[700px]"> {{ dataList }}</pre>
+      </code>
+    </el-scrollbar>
+    <pure-table
+      row-key="id"
+      align-whole="center"
+      :header-cell-style="{
+        background: 'var(--el-fill-color-light)',
+        color: 'var(--el-text-color-primary)'
+      }"
+      :data="dataList"
+      :columns="columns"
+    >
+      <template #operation="{ row, index }">
+        <el-button
+          v-if="!editMap[index]?.editable"
+          class="reset-margin"
+          link
+          type="primary"
+          @click="onEdit(row, index)"
+        >
+          修改
+        </el-button>
+        <div v-else>
+          <el-button
+            class="reset-margin"
+            link
+            type="primary"
+            @click="onSave(index)"
+          >
+            保存
+          </el-button>
+          <el-button class="reset-margin" link @click="onCancel(index)">
+            取消
+          </el-button>
+        </div>
+      </template>
+    </pure-table>
+  </div>
+</template>

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

@@ -1,4 +1,5 @@
 import Demo1 from "./demo1/index.vue";
+import Demo2 from "./demo2/index.vue";
 
 const rendContent = (val: string) =>
   `代码位置：src/views/pure-table/edit/${val}/index.vue`;
@@ -7,7 +8,13 @@ export const list = [
   {
     key: "demo1",
     content: rendContent("demo1"),
-    title: "示例一",
+    title: "整体编辑",
     component: Demo1
+  },
+  {
+    key: "demo2",
+    content: rendContent("demo2"),
+    title: "单行编辑",
+    component: Demo2
   }
 ];