diff --git a/packages/select-table-modal/index.vue b/packages/select-table-modal/index.vue
index 2b95804..0fc3e0e 100644
--- a/packages/select-table-modal/index.vue
+++ b/packages/select-table-modal/index.vue
@@ -2,7 +2,7 @@
* @Author: zhaojinfeng 121016171@qq.com
* @Date: 2023-07-18 12:30:07
* @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-07-21 22:35:52
+ * @LastEditTime: 2023-07-22 15:48:02
* @FilePath: \vue3\packages\select-table-modal\index.vue
* @Description: 模态框选择表格
*
@@ -40,9 +40,16 @@
highlight-current-row
:row-key="rowKey"
:empty-text="emptyText"
+ :reserve-selection="multiple"
@current-change="handleCurrentChange"
+ @selection-change="handleSelectionChange"
>
-
+
+
+
+
+
+
) => any
}>(),
{
hidePagination: false,
@@ -107,6 +117,9 @@ const props = withDefaults(
width: '1000px',
title: '选择',
emptyText: '暂无数据',
+ multipleFormattter(row: Record) {
+ return { ...row }
+ },
},
)
const emit = defineEmits<{
@@ -127,14 +140,7 @@ const showDialog = ref(false)
let tableData = $ref([])
let selection = $ref()
-function confirm() {
- emit('confirm', selection)
- emit('update:value', selection && selection[props.rowKey])
- if (props.hideButton)
- emit('update:show', false)
- else
- showDialog.value = false
-}
+let selections = $ref | null>(null)
function open() {
if (props.hideButton)
@@ -162,6 +168,16 @@ const queryParams = reactive({
pageSize: 10,
})
+function initSelections() {
+ const rows = tableData.map(props.multipleFormattter)
+ tableRef?.toggleRowSelection(rows, true)
+}
+function initSelection() {
+ const row = tableData.find(row => row[props.rowKey] === props.value)
+ if (row)
+ tableRef?.setCurrentRow(row)
+}
+
/** 查询表格数据 */
async function getList() {
loading = true
@@ -172,15 +188,38 @@ async function getList() {
...queryParams,
})
tableData = response.rows
- const row = tableData.find(row => row[props.rowKey] === props.value)
total = response.total
- if (row)
- tableRef?.setCurrentRow(row)
+ if (props.multiple)
+ initSelections()
+
+ else
+ initSelection()
}
finally {
loading = false
}
}
+
+/** 多选框选中数据 */
+function handleSelectionChange(rows: any[]) {
+ selections = rows.map(props.multipleFormattter)
+}
+function confirm() {
+ if (props.multiple) {
+ emit('confirm', selections)
+ emit('update:value', selections)
+ }
+ else {
+ emit('confirm', selection)
+ emit('update:value', selection && selection[props.rowKey])
+ }
+
+ if (props.hideButton)
+ emit('update:show', false)
+ else
+ showDialog.value = false
+}
+
/** 重置按钮操作 */
function resetQuery() {
queryRef?.resetFields()
diff --git a/stories/SelectTableModal.stories.ts b/stories/SelectTableModal.stories.ts
index e71ce17..7420e53 100644
--- a/stories/SelectTableModal.stories.ts
+++ b/stories/SelectTableModal.stories.ts
@@ -2,7 +2,7 @@
* @Author: zhaojinfeng 121016171@qq.com
* @Date: 2023-07-18 12:30:07
* @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-07-21 22:03:59
+ * @LastEditTime: 2023-07-22 15:49:10
* @FilePath: \vue3\stories\SelectTableModal.stories.ts
* @Description:
*
@@ -38,6 +38,7 @@ const meta = {
pageSizes: [10, 20, 30, 50],
pagerCount: document.body.clientWidth < 992 ? 5 : 7,
hidePagination: false,
+ multiple: false,
},
render: args => ({
components: { ThSelectTableModal },
@@ -54,6 +55,7 @@ const meta = {
layout="args.layout"
:page-sizes="args.pageSizes"
:pager-count="args.pagerCount"
+ :multiple="args.multiple"
/>`,
}),
} satisfies Meta