chore: 更新表格选择器示例

package.json

@@ -67,7 +67,7 @@
     "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
     "el-table-infinite-scroll": "^3.0.3",
-    "element-plus": "^2.5.0",
+    "element-plus": "^2.5.1",
     "intro.js": "^7.2.0",
     "js-cookie": "^3.0.5",
     "jsbarcode": "^3.11.6",

pnpm-lock.yaml

@@ -19,10 +19,10 @@ dependencies:
     version: 1.2.19
   '@pureadmin/descriptions':
     specifier: ^1.2.0
-    version: 1.2.0(element-plus@2.5.0)(typescript@5.3.3)
+    version: 1.2.0(element-plus@2.5.1)(typescript@5.3.3)
   '@pureadmin/table':
     specifier: ^3.0.1
-    version: 3.0.1(element-plus@2.5.0)(typescript@5.3.3)
+    version: 3.0.1(element-plus@2.5.1)(typescript@5.3.3)
   '@pureadmin/utils':
     specifier: ^2.3.1
     version: 2.3.1(echarts@5.4.3)(vue@3.4.7)
@@ -63,8 +63,8 @@ dependencies:
     specifier: ^3.0.3
     version: 3.0.3(typescript@5.3.3)
   element-plus:
-    specifier: ^2.5.0
-    version: 2.5.0(vue@3.4.7)
+    specifier: ^2.5.1
+    version: 2.5.1(vue@3.4.7)
   intro.js:
     specifier: ^7.2.0
     version: 7.2.0
@@ -1726,24 +1726,24 @@ packages:
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
     dev: false
 
-  /@pureadmin/descriptions@1.2.0(element-plus@2.5.0)(typescript@5.3.3):
+  /@pureadmin/descriptions@1.2.0(element-plus@2.5.1)(typescript@5.3.3):
     resolution: {integrity: sha512-k2A3SGGKf0eKrSQB3hXzgGlAz7DKSM31WN/QGBn37UCIHfQlIVrvSPEAF2omHlukQT2Artap6veCqBcJ9dGAKQ==}
     peerDependencies:
       element-plus: ^2.0.0
     dependencies:
       '@element-plus/icons-vue': 2.3.1(vue@3.4.7)
-      element-plus: 2.5.0(vue@3.4.7)
+      element-plus: 2.5.1(vue@3.4.7)
       vue: 3.4.7(typescript@5.3.3)
     transitivePeerDependencies:
       - typescript
     dev: false
 
-  /@pureadmin/table@3.0.1(element-plus@2.5.0)(typescript@5.3.3):
+  /@pureadmin/table@3.0.1(element-plus@2.5.1)(typescript@5.3.3):
     resolution: {integrity: sha512-DBIv0YRZogSIEtsBPNjm6tYuImaE8ZJXwAu/gutEyaH9wATN09doKDmAisyBj+XEydfM5R9hlvhQ8SzJkbtarA==}
     peerDependencies:
       element-plus: ^2.0.0
     dependencies:
-      element-plus: 2.5.0(vue@3.4.7)
+      element-plus: 2.5.1(vue@3.4.7)
       vue: 3.4.7(typescript@5.3.3)
     transitivePeerDependencies:
       - typescript
@@ -3959,7 +3959,7 @@ packages:
     resolution: {integrity: sha512-cmMHg4MxrNOV2dFziV3ISRo+rM/3tAH8TE3wWMGKd4ucjvk21Bfb6MJfPuNAicLOkq4fYZm+J+mr0NmDPnvolQ==}
     dependencies:
       core-js: 3.35.0
-      element-plus: 2.5.0(vue@3.4.7)
+      element-plus: 2.5.1(vue@3.4.7)
       vue: 3.4.7(typescript@5.3.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -3992,8 +3992,8 @@ packages:
       - '@vue/composition-api'
     dev: false
 
-  /element-plus@2.5.0(vue@3.4.7):
-    resolution: {integrity: sha512-NE58a5Exf0/vxgxRRR2Ibs7AjiqB72lMrg7plmSoZwgZy17IQAWgzOe7ZyRtEQM/3q3BAuJDTUUAuhP/mKVPKg==}
+  /element-plus@2.5.1(vue@3.4.7):
+    resolution: {integrity: sha512-ylX9h2U125/nesPlLWgfPkI1rID9EiGROlgf0QkzBUjx+/d4w/YqS+IqZZZC5yvQPhKYu9aMDqEBzOurwn4Cnw==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:

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'