feat: 多选功能

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"
       >
-        <el-table-column v-for="column in columns" :key="column.prop" :align="column.align || 'center'" :label="column.label" :prop="column.prop" :formatter="column.formatter" />
+        <el-table-column v-if="multiple" type="selection" width="55" align="center" />
+        <el-table-column v-for="column in columns" :key="column.prop" :align="column.align || 'center'" :label="column.label" :prop="column.prop" :formatter="column.formatter">
+          <template #default="scope">
+            <slot name="column" :scope="scope" />
+          </template>
+        </el-table-column>
       </el-table>
       <div w-full h-70px relative>
         <el-pagination
@@ -96,6 +103,9 @@ const props = withDefaults(
     hidePagination?: boolean
     title?: string
     width?: string | number
+    /** 是否多选 */
+    multiple?: boolean
+    multipleFormattter?: (row: Record<string, any>) => any
   }>(),
   {
     hidePagination: false,
@@ -107,6 +117,9 @@ const props = withDefaults(
     width: '1000px',
     title: '选择',
     emptyText: '暂无数据',
+    multipleFormattter(row: Record<string, any>) {
+      return { ...row }
+    },
   },
 )
 const emit = defineEmits<{
@@ -127,14 +140,7 @@ const showDialog = ref(false)
 
 let tableData = $ref<any[]>([])
 let selection = $ref<any>()
-function confirm() {
+let selections = $ref<Record<string, any> | null>(null)
-  emit('confirm', selection)
-  emit('update:value', selection && selection[props.rowKey])
-  if (props.hideButton)
-    emit('update:show', false)
-  else
-    showDialog.value = false
-}
 
 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)
+    if (props.multiple)
-      tableRef?.setCurrentRow(row)
+      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()

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<typeof ThSelectTableModal>