fix: 动态插槽

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-22 16:36:13
+ * @LastEditTime: 2023-07-22 17:52:02
  * @FilePath: \vue3\packages\select-table-modal\index.vue
  * @Description: 模态框选择表格
  *
@@ -45,9 +45,18 @@
         @selection-change="handleSelectionChange"
       >
         <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${column.prop}`" :scope="scope" />
+        <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 v-if="isExist(column.prop)" #default="{ row, $index }">
+            <!-- element自带的属性$index -->
+            <!-- eslint-disable-next-line vue/valid-attribute-name -->
+            <slot :name="`column-${column.prop}`" :row="row" :$index="$index" />
           </template>
         </el-table-column>
       </el-table>
@@ -140,6 +149,12 @@ interface FormItem {
 }
 const showDialog = ref(false)
 
+const slots = Object.keys(useSlots())
+
+function isExist(prop: string) {
+  return slots.includes(`column-${prop}`)
+}
+
 let tableData = $ref<any[]>([])
 let selection = $ref<any>()
 let selections = $ref<Record<string, any>[] | null>(null)

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-22 16:28:10
+ * @LastEditTime: 2023-07-22 17:51:34
  * @FilePath: \vue3\stories\SelectTableModal.stories.ts
  * @Description:
  *
@@ -10,17 +10,17 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import ThSelectTableModal from '../packages/select-table-modal/index.vue'
 
-// 模拟1秒钟的接口请求
+// 模拟800毫秒钟的接口请求
 function request() {
   return new Promise<Page>((resolve) => {
     setTimeout(() => {
       resolve({
         code: 200,
-        rows: [{ prop1: 'prop1', prop2: 'prop2', prop3: 'prop3' }],
+        rows: [{ prop1: 'prop11', prop2: 'prop12', prop3: 'prop13' }, { prop1: 'prop21', prop2: 'prop22', prop3: 'prop23' }],
         total: 10,
         message: 'ok',
       })
-    }, 1000)
+    }, 800)
   })
 }
 
@@ -58,7 +58,7 @@ const meta = {
                  :pager-count="args.pagerCount"
                  :multiple="args.multiple"
                  :z-index="args.zIndex"
-              />`,
+               ><template #x>x</template></th-select-table-modal>`,
   }),
 } satisfies Meta<typeof ThSelectTableModal>
 export default meta
@@ -68,3 +68,29 @@ type Story = StoryObj<typeof meta>
 export const Base: Story = {
   name: '基本使用',
 }
+
+export const TableSlot: Story = {
+  name: '自定义表格展示',
+  render: args => ({
+    components: { ThSelectTableModal },
+    setup() {
+      return { args }
+    },
+    args: {
+      value: '',
+      rowKey: 'prop1',
+      columns: [{ label: 'label1', prop: 'prop1' }, { label: 'label2', prop: 'prop2' }, { label: 'label3', prop: 'prop3' }],
+      formItems: [{ label: 'label1', prop: 'prop1' }, { label: 'label2', prop: 'prop2', selectOptions: [{ label: '1', value: '1' }, { label: '2', value: '2' }] }],
+      request,
+    },
+    template: `<th-select-table-modal
+                 v-model:value="args.value"
+                 :row-key="args.rowKey"
+                 :columns="args.columns"
+                 :form-items="args.formItems"
+                 :request="args.request"
+               >
+                 <template #column-prop1="{row}">row:{{row}}</template>
+               </th-select-table-modal>`,
+  }),
+}