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

locales/en.yaml

@@ -130,6 +130,7 @@ menus:
   hsdanmaku: Danmaku
   hsPureTableBase: Base Usage
   hsPureTableHigh: High Usage
+  hsPureTableEdit: Edit Usage
   hsboard: Paint Board
   hsMenuoverflow: Menu Overflow Show Tooltip Text
   hsChildMenuoverflow: Child Menu Overflow Show Tooltip Text

locales/zh-CN.yaml

@@ -130,6 +130,7 @@ menus:
   hsdanmaku: 弹幕
   hsPureTableBase: 基础用法（23个示例）
   hsPureTableHigh: 高级用法（11个示例）
+  hsPureTableEdit: 可编辑用法
   hsboard: 艺术画板
   hsMenuoverflow: 目录超出显示 Tooltip 文字提示
   hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示

src/router/modules/table.ts

@@ -25,6 +25,15 @@ export default {
       meta: {
         title: $t("menus.hsPureTableHigh")
       }
+    },
+    {
+      path: "/pure-table/edit",
+      name: "PureTableEdit",
+      component: () => import("@/views/pure-table/edit.vue"),
+      meta: {
+        title: $t("menus.hsPureTableEdit"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
     }
   ]
 } satisfies RouteConfigsTable;

src/views/pure-table/edit.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { list } from "./edit/list";
+
+defineOptions({
+  name: "PureTableEdit"
+});
+
+const selected = ref(0);
+
+function tabClick({ index }) {
+  selected.value = index;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          可编辑用法全部采用 tsx 语法，充分发挥
+          <el-link
+            href="https://github.com/pure-admin/pure-admin-table"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            @pureadmin/table
+          </el-link>
+          的灵活性，维护整体表格只需操作 columns 配置即可
+        </span>
+      </div>
+    </template>
+
+    <el-alert
+      title="可编辑用法中所有表格都设置了 row-key ，它是唯一值的字段，比如id。作用：1. 用来优化 Table
+      的渲染，尤其当字段在深层结构中；2. 防止拖拽后表格组件内部混乱（拖拽必须设置）"
+      type="info"
+      :closable="false"
+    />
+
+    <el-tabs @tab-click="tabClick">
+      <template v-for="(item, index) of list" :key="item.key">
+        <el-tab-pane :lazy="true">
+          <template #label>
+            <el-tooltip
+              :content="`（第 ${index + 1} 个示例）${item.content}`"
+              placement="top-end"
+            >
+              <span>{{ item.title }}</span>
+            </el-tooltip>
+          </template>
+          <component :is="item.component" v-if="selected == index" />
+        </el-tab-pane>
+      </template>
+    </el-tabs>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-tabs__nav-wrap)::after {
+  height: 1px;
+}
+
+:deep(.el-tabs__header) {
+  margin-top: 10px;
+}
+
+:deep(.el-alert__title) {
+  font-size: 16px;
+}
+
+:deep(.el-tabs__nav-next),
+:deep(.el-tabs__nav-prev) {
+  font-size: 16px;
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-tabs__nav-next.is-disabled),
+:deep(.el-tabs__nav-prev.is-disabled) {
+  opacity: 0.5;
+}
+</style>

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

@@ -0,0 +1,68 @@
+import dayjs from "dayjs";
+
+const date = dayjs(new Date()).format("YYYY-MM-DD");
+
+const tableData = [
+  {
+    date,
+    name: "Tom",
+    sex: 0, // 0代表男 1代表女
+    hobby: null
+  },
+  {
+    date,
+    name: "Jack",
+    sex: 0,
+    hobby: null
+  },
+  {
+    date,
+    name: "Dick",
+    sex: 0,
+    hobby: null
+  },
+  {
+    date,
+    name: "Harry",
+    sex: 0,
+    hobby: null
+  },
+  {
+    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 };

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

@@ -0,0 +1,105 @@
+import { ref } from "vue";
+
+export function useColumns() {
+  const dataList = ref([]);
+
+  const options = [
+    {
+      value: 0,
+      label: "上午写代码"
+    },
+    {
+      value: 1,
+      label: "下午写代码"
+    },
+    {
+      value: 2,
+      label: "晚上写代码"
+    },
+    {
+      value: 3,
+      label: "凌晨休息了"
+    }
+  ];
+
+  const columns: TableColumnList = [
+    {
+      label: "姓名",
+      prop: "name",
+      cellRenderer: ({ row }) => <el-input v-model={row.name} />
+    },
+    {
+      label: "性别",
+      prop: "sex",
+      cellRenderer: ({ row }) => (
+        <el-switch
+          v-model={row.sex}
+          inline-prompt
+          active-value={0}
+          inactive-value={1}
+          active-text="男"
+          inactive-text="女"
+        />
+      )
+    },
+    {
+      label: "爱好",
+      prop: "hobby",
+      cellRenderer: ({ row }) => (
+        <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>
+      )
+    },
+    {
+      label: "日期",
+      prop: "date",
+      cellRenderer: ({ row }) => (
+        <el-date-picker
+          v-model={row.date}
+          type="date"
+          format="YYYY/MM/DD"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择日期"
+        />
+      ),
+      minWidth: 110
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 90,
+      slot: "operation"
+    }
+  ];
+
+  function onAdd() {
+    dataList.value.push({
+      id: dataList.value.length + 1,
+      name: "",
+      sex: 0,
+      hobby: "",
+      date: ""
+    });
+  }
+
+  function onDel(row) {
+    const index = dataList.value.indexOf(row);
+    if (index !== -1) dataList.value.splice(index, 1);
+  }
+
+  return {
+    columns,
+    dataList,
+    onAdd,
+    onDel
+  };
+}

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

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { useColumns } from "./columns";
+import Empty from "../empty.svg?component";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import AddFill from "@iconify-icons/ep/plus";
+import Delete from "@iconify-icons/ep/delete";
+
+const { columns, dataList, onAdd, onDel } = useColumns();
+</script>
+
+<template>
+  <div class="flex">
+    <el-scrollbar height="700px">
+      <code>
+        <pre class="w-[700px]"> {{ dataList }}</pre>
+      </code>
+    </el-scrollbar>
+    <pure-table
+      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"
+    >
+      <template #empty>
+        <Empty fill="var(--el-svg-monochrome-grey)" class="m-auto" />
+      </template>
+      <template #append>
+        <el-button
+          plain
+          class="w-full my-2"
+          :icon="useRenderIcon(AddFill)"
+          @click="onAdd"
+        >
+          添加一行数据
+        </el-button>
+      </template>
+      <template #operation="{ row }">
+        <el-button
+          class="reset-margin"
+          link
+          type="primary"
+          :icon="useRenderIcon(Delete)"
+          @click="onDel(row)"
+        />
+      </template>
+    </pure-table>
+  </div>
+</template>

src/views/pure-table/edit/empty.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="empty-icon" viewBox="0 0 1024 1024"><path d="M855.6 427.2H168.5c-12.7 0-24.4 6.9-30.6 18L4.4 684.7C1.5 689.9 0 695.8 0 701.8v287.1c0 19.4 15.7 35.1 35.1 35.1H989c19.4 0 35.1-15.7 35.1-35.1V701.8c0-6-1.5-11.8-4.4-17.1L886.2 445.2c-6.2-11.1-17.9-18-30.6-18M673.4 695.6c-16.5 0-30.8 11.5-34.3 27.7-12.7 58.5-64.8 102.3-127.2 102.3s-114.5-43.8-127.2-102.3c-3.5-16.1-17.8-27.7-34.3-27.7H119c-26.4 0-43.3-28-31.1-51.4l81.7-155.8c6.1-11.6 18-18.8 31.1-18.8h622.4c13 0 25 7.2 31.1 18.8l81.7 155.8c12.2 23.4-4.7 51.4-31.1 51.4zm146.5-486.1c-1-1.8-2.1-3.7-3.2-5.5-9.8-16.6-31.1-22.2-47.8-12.6L648.5 261c-17 9.8-22.7 31.6-12.6 48.4.9 1.4 1.7 2.9 2.5 4.4 9.5 17 31.2 22.8 48 13L807 257.3c16.7-9.7 22.4-31 12.9-47.8m-444.5 51.6L255 191.6c-16.7-9.6-38-4-47.8 12.6-1.1 1.8-2.1 3.6-3.2 5.5-9.5 16.8-3.8 38.1 12.9 47.8L337.3 327c16.9 9.7 38.6 4 48-13.1.8-1.5 1.7-2.9 2.5-4.4 10.2-16.8 4.5-38.6-12.4-48.4M512 239.3h2.5c19.5.3 35.5-15.5 35.5-35.1v-139c0-19.3-15.6-34.9-34.8-35.1h-6.4C489.6 30.3 474 46 474 65.2v139c0 19.5 15.9 35.4 35.5 35.1z"/></svg>

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

@@ -0,0 +1,13 @@
+import Demo1 from "./demo1/index.vue";
+
+const rendContent = (val: string) =>
+  `代码位置：src/views/pure-table/edit/${val}/index.vue`;
+
+export const list = [
+  {
+    key: "demo1",
+    content: rendContent("demo1"),
+    title: "示例一",
+    component: Demo1
+  }
+];