@qin-ui/element-plus-pro 1.2.2 → 1.2.4

package/src/components/table/components/TableColumnRenderer.vue

@@ -17,7 +17,7 @@ const { columns } = defineProps<Props>();
 
 const getColumnKey = (column: Column<D>, index: number) => {
   const key = column.key ?? column.prop;
-  if (key === undefined || key === null) return `__idx_${index}`;
+  if (key === undefined || key === null) return `__col_${index}`;
   return Array.isArray(key) ? key.join('.') : String(key);
 };
 
@@ -33,10 +33,11 @@ const normalizedColumns = computed(() => {
 
 const getColumnProps = (column: Column<D>) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { hidden, render, key, ...rest } = column;
+  const { hidden, render, key, children, ...rest } = column;
   const prop = column.prop ? String(column.prop) : undefined;
   return {
     ...rest,
+    label: column.label ?? (column as any).title,
     prop,
     columnKey: key ? String(key) : prop,
   };
@@ -48,20 +49,33 @@ const getColumnProps = (column: Column<D>) => {
     v-for="(column, index) in normalizedColumns"
     :key="getColumnKey(column, index)"
   >
-    <TableColumn v-bind="getColumnProps(column)">
+    <!-- 分组列（递归子列） -->
+    <TableColumn
+      v-if="column.children && column.children.length > 0"
+      v-bind="getColumnProps(column)"
+    >
+      <TableColumnRenderer :columns="column.children" />
+    </TableColumn>
+
+    <!-- 自定义 render 列 -->
+    <TableColumn
+      v-else-if="typeof column.render === 'function'"
+      v-bind="getColumnProps(column)"
+    >
       <template #default="scope">
-        <template v-if="typeof column.render === 'function'">
-          <component
-            :is="
-              column.render?.({
-                ...scope,
-                column,
-                cellValue: getCellValue(scope.row, column),
-              })
-            "
-          />
-        </template>
+        <component
+          :is="
+            column.render?.({
+              ...scope,
+              column,
+              cellValue: getCellValue(scope.row, column),
+            })
+          "
+        />
       </template>
     </TableColumn>
+
+    <!-- 普通列（Element Plus 原生渲染） -->
+    <TableColumn v-else v-bind="getColumnProps(column)" />
   </template>
 </template>

package/src/components/table/types/index.ts

@@ -60,6 +60,8 @@ export type Column<D extends Data = Data> = Partial<
   hidden?: boolean;
   /** 自定义渲染函数 */
   render?: BivariantRender<D>;
+  /** 嵌套子列（用于表头分组） */
+  children?: Column<D>[];
 };
 
 /**

package/src/components/table/useTable.ts

@@ -132,16 +132,7 @@ export function useTable<
   const coreTable = (coreUseTable as any)({
     ...rest,
     dataSource: data,
-    // 补齐列 key（key ?? prop ?? columnKey），
-    // 使 setColumn 等按 key 匹配的 API 对 Element Plus 的 prop 列生效
-    columns: columns?.map(column => {
-      if (column.key !== undefined && column.key !== null) return column;
-      const prop = column.prop;
-      const fallback =
-        prop ??
-        (typeof column.columnKey === 'string' ? column.columnKey : undefined);
-      return { ...column, key: fallback };
-    }),
+    columns,
   }) as _Table<D, T, Column<T>>;
 
   const { dataSource, ...tableWithoutDataSource } = coreTable as any;

package/src/shared/core/index.ts

@@ -11,7 +11,7 @@ export {
   useFormRef,
   // injection keys
   InjectionFormKey,
-  InjectionPathKey,
+  InjectionFormSlotsKey,
   // utils
   get,
   getObject,

package/es/components/form/components/GroupedFieldAttrs/index.vue.d.ts

@@ -1,31 +0,0 @@
-import { GridItemProps, FormItemProps } from '../../../../shared/ui';
-import { Base, Field } from '../../types';
-import { FORM_ITEM_SLOT_KEYS } from '../../constants';
-type Props = {
-    field: Field;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            gridItemProps: GridItemProps;
-            formItemProps: FormItemProps & {
-                container?: Base["formItemContainer"];
-            };
-            formItemSlots: Record<(typeof FORM_ITEM_SLOT_KEYS)[number], any>;
-            componentProps: Record<string, any>;
-        }): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=index.vue.d.ts.map

package/es/components/form/components/GroupedFieldAttrs/index.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/GroupedFieldAttrs/index.vue"],"names":[],"mappings":"AA0IA,OAAO,EACL,aAAa,EACb,aAAa,EAGd,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAMtD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AA4EF,iBAAS,cAAc;WAqBT,OAAO,IAA6B;;;2BAzFjC,aAAa;2BACb,aAAa,GAAG;gBAAE,SAAS,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAA;aAAE;2BACzD,MAAM,CAAC,CAAC,OAAO,mBAAmB,EAAE,MAAM,CAAC,EAAE,GAAG,CAAC;4BAChD,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;YA4ER,GAAG;;;;EAe/B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,sRAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/es/components/form/components/PathProvider/index.vue.d.ts

@@ -1,24 +0,0 @@
-import { NamePath } from '../../../../shared/ui';
-type __VLS_Props = {
-    path?: NamePath;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            path: string | undefined;
-        }): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
-//# sourceMappingURL=index.vue.d.ts.map

package/es/components/form/components/PathProvider/index.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/components/PathProvider/index.vue"],"names":[],"mappings":"AAuBA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,KAAK,WAAW,GAAG;IAAE,IAAI,CAAC,EAAE,QAAQ,CAAA;CAAE,CAAC;AAavC,iBAAS,cAAc;WAqBT,OAAO,IAA6B;;;;YAVrB,GAAG;;;;EAe/B;AASD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kSAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/src/components/form/components/GroupedFieldAttrs/index.vue

@@ -1,115 +0,0 @@
-<script lang="ts" setup>
-/**
- * @component GroupedFieldAttrs
- * @description 字段属性分组器，将 field 配置对象拆分为三类属性
- *
- * ## 属性分发逻辑
- *
- * 单个 field 对象包含多种属性，需要分发到不同的渲染目标：
- *
- * 1. **gridItemProps** — 网格布局属性（span、xs、sm、md、lg、xl、xxl 等），传递给 GridItem
- * 2. **formItemProps** — 表单项属性（label、rules、required 等），传递给 FormItem
- * 3. **componentProps** — 组件属性（placeholder、clearable 等），传递给输入组件
- * 4. **formItemSlots** — FormItem 的具名插槽（label、error 等）
- *
- * 分组依据：
- * - 匹配 element-plus GridItem 的 props key → gridItemProps
- * - 匹配 element-plus FormItem 的 props key → formItemProps
- * - 其余所有属性 → componentProps
- * - 属于 FORM_ITEM_SLOT_KEYS 的插槽 → formItemSlots
- * - 其余插槽 → componentProps.slots
- */
-import { computed, inject, mergeProps, toValue } from 'vue';
-import {
-  GridItemProps,
-  FormItemProps,
-  gridItemProps,
-  formItemProps,
-} from '../../../../shared/ui';
-import { INJECT_CONFIG } from '../../../component-provider/constants';
-import type { Base, Field } from '../../types';
-import { FORM_ITEM_SLOT_KEYS } from '../../constants';
-import { isPlainObject } from '../../../../shared/core';
-
-const formItemPropKeys = Object.keys(formItemProps());
-const gridItemPropKeys = Object.keys(gridItemProps());
-
-type Props = {
-  field: Field;
-};
-const props = defineProps<Props>();
-
-const config = INJECT_CONFIG['pro-form-item'];
-const injectFormItemProps = inject(config.injectionKey, config.default);
-
-type GroupedFieldAttrs = {
-  gridItemProps: GridItemProps;
-  formItemProps: FormItemProps & { container?: Base['formItemContainer'] };
-  formItemSlots: Record<(typeof FORM_ITEM_SLOT_KEYS)[number], any>;
-  componentProps: Record<string, any>;
-};
-
-// 将 field 配置按 key 分发到三类属性分组中
-const groupedAttributes = computed<GroupedFieldAttrs>(() => {
-  let gridItemProps: Record<string, any> = {};
-  let formItemProps: Record<string, any> = {};
-  const componentProps: Record<string, any> = { slots: {} };
-  const formItemSlots: Record<string, any> = {};
-
-  if (isPlainObject(props.field)) {
-    // prettier-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { path, name, fields, formItemClass, formItemStyle, formItemContainer, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, ...rest } =
-    props.field as any;
-    const {
-      class: injectClassName,
-      style: injectStyle,
-      span: injectSpan,
-      formItemContainer: injectFormItemContainer,
-      xs,
-      sm,
-      md,
-      lg,
-      xl,
-      ...injectRest
-    } = injectFormItemProps;
-
-    const initGridItemProps =
-      span || span === 0 ? { span } : { xs, sm, md, lg, xl, span: injectSpan };
-
-    gridItemProps = fields ? { span: span ?? 24 } : initGridItemProps;
-    formItemProps = mergeProps(
-      injectRest as any,
-      { class: injectClassName, style: injectStyle },
-      { class: toValue(formItemClass), style: toValue(formItemStyle) },
-      formItemDataAttrs
-    );
-    formItemProps.container = formItemContainer ?? injectFormItemContainer;
-
-    Object.keys(rest).forEach(k => {
-      if (gridItemPropKeys.includes(k)) {
-        gridItemProps[k] = rest[k];
-      } else if (formItemPropKeys.includes(k)) {
-        (formItemProps as any)[k] = rest[k];
-      } else {
-        componentProps[k] = rest[k];
-      }
-    });
-    // 将 componentDataAttrs 展开到组件 props 中
-    Object.assign(componentProps, componentDataAttrs);
-    Object.keys(slots).forEach(k => {
-      if (FORM_ITEM_SLOT_KEYS.includes(k as any)) {
-        formItemSlots[k] = slots[k];
-      } else {
-        componentProps['slots'][k] = slots[k];
-      }
-    });
-  }
-
-  return { gridItemProps, formItemProps, componentProps, formItemSlots };
-});
-</script>
-
-<template>
-  <slot v-bind="groupedAttributes"></slot>
-</template>

package/src/components/form/components/PathProvider/index.vue

@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-import { computed, provide } from 'vue';
-import { InjectionPathKey } from '../../constants';
-import { NamePath } from '../../../../shared/ui';
-
-const props = defineProps<{ path?: NamePath }>();
-
-const namePath = computed(() => {
-  return Array.isArray(props.path)
-    ? props.path.join('.')
-    : (props.path as string | undefined);
-});
-
-provide(InjectionPathKey, namePath);
-</script>
-
-<template>
-  <slot :path="namePath" />
-</template>