!317 feat(table): columns.customSlot属性新增function类型

jevin98 · jevin98 · commit bf0506c30d52 · 2024-05-06T09:40:02.000Z
* chore: renderFunction replace to render component
* feat(table): columns.customSlot属性新增function类型 #I9J6B0
diff --git a/docs/document-component/src/document/zh-CN/components/table.md b/docs/document-component/src/document/zh-CN/components/table.md
@@ -1022,7 +1022,7 @@ export default {
 | -------------------- | ------------------------------ | ------------------------------ | ------- | --------------------------- | -------- |
 | title                | 列标题                         | --                             | --      | --                          | --       |
 | key                  | 数据字段                       | --                             | --      | --                          | --       |
-| customSlot           | 自定义插槽                     | --                             | --      | --                          | --       |
+| customSlot           | 自定义插槽                     | `string` `function` 参数{row, data, column, rowIndex, columnIndex}    | --      | --                          | `2.17.2`新增`function`       |
 | width                | 宽度                           | --                             | --      | --                          | --       |
 | minWidth             | 最小宽度                       | --                             | `100px` | --                          | --       |
 | sort                 | 排序                           | --                             | --      | --                          | --       |
diff --git a/packages/component/src/component/_components/render.ts b/packages/component/src/component/_components/render.ts
@@ -0,0 +1,25 @@
+import { defineComponent, VNodeTypes, Slots } from "vue";
+
+import type { PropType } from "vue";
+
+type RenderFunc = (props: Record<string, unknown>) => VNodeTypes;
+
+export default defineComponent({
+  name: "LayRender",
+  props: {
+    render: {
+      type: [String, Function] as PropType<string | RenderFunc>,
+    },
+    slots: {
+      type: Object as PropType<Slots>,
+    },
+  },
+  setup(props, ctx) {
+    return () => {
+      if (typeof props.render === "string") {
+        return props.slots?.[props.render]?.(ctx.attrs);
+      }
+      return (props.render as RenderFunc)(ctx.attrs);
+    };
+  },
+});
diff --git a/packages/component/src/component/_components/renderFunction.ts b/packages/component/src/component/_components/renderFunction.ts
diff --git a/packages/component/src/component/dropdown/index.vue b/packages/component/src/component/dropdown/index.vue
@@ -38,7 +38,7 @@ import {
 } from "./interface";
 import TeleportWrapper from "../_components/teleportWrapper.vue";
 import { useFirstElement, getScrollElements, transformPlacement } from "./util";
-import RenderFunction from "../_components/renderFunction";
+import LayRender from "../_components/render";
 
 export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
 
@@ -643,10 +643,7 @@ defineExpose({ show, hide, toggle });
 </script>
 
 <template>
-  <RenderFunction
-    :renderFunc="onlyChildRenderFunc"
-    v-bind="$attrs"
-  ></RenderFunction>
+  <LayRender :render="onlyChildRenderFunc" v-bind="$attrs"></LayRender>
   <TeleportWrapper :to="popupContainer" :disabled="disabledTeleport">
     <div
       v-if="openState"
diff --git a/packages/component/src/component/tab/index.vue b/packages/component/src/component/tab/index.vue
@@ -2,7 +2,7 @@
 import "./index.less";
 import { LayIcon } from "@layui/icons-vue";
 import tabItem from "../tabItem/index.vue";
-import RenderFunction from "../_components/renderFunction";
+import LayRender from "../_components/render";
 import {
   Component,
   computed,
@@ -405,12 +405,12 @@ provide("active", active);
           @click.stop="change(child.id)"
         >
           <span>
-            <RenderFunction
+            <LayRender
               v-if="child['icon']"
-              :renderFunc="renderTabIcon"
+              :render="renderTabIcon"
               :tabData="child"
             />
-            <RenderFunction :renderFunc="renderTabTitle" :tabData="child" />
+            <LayRender :render="renderTabTitle" :tabData="child" />
           </span>
           <i
             v-if="allowClose && child.closable != false"
diff --git a/packages/component/src/component/table/TableData.vue b/packages/component/src/component/table/TableData.vue
@@ -12,6 +12,7 @@ import {
 import LayCheckbox from "../checkbox/index.vue";
 import LayTooltip from "../tooltip/index.vue";
 import LayRadio from "../radio/index.vue";
+import LayRender from "../_components/render";
 import { TableEmit } from "./typing";
 
 export interface TableRowProps {
@@ -46,6 +47,7 @@ defineOptions({
 });
 
 const slot = useSlots();
+
 const emit = defineEmits(TableEmit);
 
 const props = withDefaults(defineProps<TableRowProps>(), {
@@ -537,35 +539,38 @@ const checkboxProps = computed(() => {
                     column.ellipsisTooltipTheme === 'dark' ? true : false
                   "
                 >
-                  <slot
+                  <lay-render
                     :row="data"
                     :data="data"
                     :column="column"
                     :rowIndex="index"
                     :columnIndex="columnIndex"
-                    :name="column.customSlot"
-                  ></slot>
+                    :render="column.customSlot"
+                    :slots="slot"
+                  ></lay-render>
                   <template #content>
-                    <slot
+                    <lay-render
                       :row="data"
                       :data="data"
                       :column="column"
                       :rowIndex="index"
                       :columnIndex="columnIndex"
-                      :name="column.customSlot"
-                    ></slot>
+                      :render="column.customSlot"
+                      :slots="slot"
+                    ></lay-render>
                   </template>
                 </lay-tooltip>
 
-                <slot
+                <lay-render
                   v-else
                   :row="data"
                   :data="data"
                   :column="column"
                   :rowIndex="index"
                   :columnIndex="columnIndex"
-                  :name="column.customSlot"
-                ></slot>
+                  :render="column.customSlot"
+                  :slots="slot"
+                ></lay-render>
               </div>
             </td>
           </template>
