From 7b228f4784d796e02b817d2e9f47a783a3f349ae Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Thu, 11 Jan 2024 19:39:10 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=E8=A1=A8=E6=A0=BC?= =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- pnpm-lock.yaml | 22 ++++++------- src/views/pure-table/high/data.ts | 33 +++++++++++-------- .../high/table-select/multiple/columns.tsx | 17 ++++++---- .../high/table-select/multiple/index.vue | 6 ++-- .../high/table-select/radio/columns.tsx | 3 +- .../high/table-select/radio/index.vue | 5 +-- 7 files changed, 50 insertions(+), 38 deletions(-) diff --git a/package.json b/package.json index c7b1be310..7b2028b6c 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 391ea0475..c888c2633 100644 --- a/pnpm-lock.yaml +++ b/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: diff --git a/src/views/pure-table/high/data.ts b/src/views/pure-table/high/data.ts index a79cfb14c..777f67aaf 100644 --- a/src/views/pure-table/high/data.ts +++ b/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 { diff --git a/src/views/pure-table/high/table-select/multiple/columns.tsx b/src/views/pure-table/high/table-select/multiple/columns.tsx index ba4cb002c..0966d22ef 100644 --- a/src/views/pure-table/high/table-select/multiple/columns.tsx +++ b/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({ - 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 { diff --git a/src/views/pure-table/high/table-select/multiple/index.vue b/src/views/pure-table/high/table-select/multiple/index.vue index 861f561a2..88a32e1ae 100644 --- a/src/views/pure-table/high/table-select/multiple/index.vue +++ b/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" >