fix: 动态插槽

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>`,
+  }),
+}