chore: 更新表格选择器示例

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

@@ -43,6 +43,16 @@ const tableData = [
     date,
     name: "Mike",
     address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Mike1",
+    address: "No. 189, Grove St, Los Angeles"
+  },
+  {
+    date,
+    name: "Mike2",
+    address: "No. 189, Grove St, Los Angeles"
   }
 ];
 
@@ -70,24 +80,19 @@ const tableDataSortable = clone(tableData, true).map((item, index) => {
 const tableDataDrag = clone(tableData, true).map((item, index) => {
   delete item.address;
   delete item.date;
-  return Object.assign(
-    {
-      id: index + 1,
-      date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`
-    },
-    item
-  );
+  return Object.assign(item, {
+    id: index + 1,
+    date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`
+  });
 });
 
 const tableDataEdit = clone(tableData, true).map((item, index) => {
   delete item.date;
-  return Object.assign(
-    {
-      id: index + 1,
-      date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`
-    },
-    item
-  );
+  return Object.assign(item, {
+    id: index + 1,
+    date: `${dayjs(new Date()).format("YYYY-MM")}-${index + 1}`,
+    address: "China"
+  });
 });
 
 export {

src/views/pure-table/high/table-select/multiple/columns.tsx

@@ -1,3 +1,4 @@
+import { message } from "@/utils/message";
 import { tableDataEdit } from "../../data";
 import { ref, reactive, type Ref } from "vue";
 import type { PaginationProps } from "@pureadmin/table";
@@ -7,6 +8,7 @@ export function useColumns(selectRef: Ref, tableRef: Ref) {
   const columns: TableColumnList = [
     {
       type: "selection",
+      reserveSelection: true,
       align: "left"
     },
     {
@@ -16,7 +18,8 @@ export function useColumns(selectRef: Ref, tableRef: Ref) {
     },
     {
       label: "日期",
-      prop: "date"
+      prop: "date",
+      minWidth: 120
     },
     {
       label: "姓名",
@@ -30,7 +33,7 @@ export function useColumns(selectRef: Ref, tableRef: Ref) {
 
   /** 分页配置 */
   const pagination = reactive<PaginationProps>({
-    pageSize: 10,
+    pageSize: 5,
     currentPage: 1,
     layout: "prev, pager, next",
     total: tableDataEdit.length,
@@ -41,15 +44,14 @@ export function useColumns(selectRef: Ref, tableRef: Ref) {
   const handleSelectionChange = val => {
     const arr = [];
     val.forEach(v => {
-      arr.push(v.name);
+      arr.push({ label: v.name, id: v.id });
     });
     selectValue.value = arr;
   };
 
-  const removeTag = val => {
-    // TODO optimize el-select add formatter
+  const removeTag = ({ id }) => {
     const { toggleRowSelection } = tableRef.value.getTableRef();
-    toggleRowSelection(tableDataEdit.filter(v => v.name === val)[0], false);
+    toggleRowSelection(tableDataEdit.filter(v => v.id == id)?.[0], false);
   };
 
   const onClear = () => {
@@ -59,6 +61,9 @@ export function useColumns(selectRef: Ref, tableRef: Ref) {
 
   const onSure = () => {
     selectRef.value.blur();
+    message(`当前选中的数据为：${JSON.stringify(selectValue.value)}`, {
+      type: "success"
+    });
   };
 
   return {

src/views/pure-table/high/table-select/multiple/index.vue

@@ -25,16 +25,16 @@ const {
     clearable
     multiple
     collapse-tags
-    collapse-tags-tooltip
+    value-key="id"
     @remove-tag="removeTag"
     @clear="onClear"
   >
     <template #empty>
-      <div class="w-[600px] m-4">
+      <div class="m-4">
         <pure-table
           ref="tableRef"
-          height="355"
           row-key="id"
+          alignWhole="center"
           :header-cell-style="{
             background: '#f5f7fa',
             color: '#303133'

src/views/pure-table/high/table-select/radio/columns.tsx

@@ -13,7 +13,8 @@ export function useColumns(selectRef: Ref) {
     },
     {
       label: "日期",
-      prop: "date"
+      prop: "date",
+      minWidth: 120
     },
     {
       label: "姓名",

src/views/pure-table/high/table-select/radio/index.vue

@@ -19,13 +19,14 @@ const {
     v-model="selectValue"
     class="!w-[200px]"
     placeholder="请选择"
+    value-key="id"
     clearable
   >
     <template #empty>
-      <div class="w-[600px] m-4">
+      <div class="m-4">
         <pure-table
-          height="355"
           row-key="id"
+          alignWhole="center"
           :header-cell-style="{
             background: '#f5f7fa',
             color: '#303133'