@tmagic/form 1.8.0-beta.25 → 1.8.0-beta.27

package/src/containers/table-group-list/useAdd.ts

@@ -3,7 +3,9 @@ import { computed, inject } from 'vue';
 import { tMagicMessage } from '@tmagic/design';
 import type { FormConfig, FormState, TableConfig, TableGroupListCommonConfig } from '@tmagic/form-schema';
 
-import { initValue } from '../../utils/form';
+import { applyMountValueEffects } from '@form/utils/collectFields';
+import { initValue } from '@form/utils/form';
+
 import type { TableProps } from '../table/type';
 
 export const useAdd = (
@@ -22,54 +24,63 @@ export const useAdd = (
 
     if (!modelName) return false;
 
-    if (!props.model[modelName]?.length) {
-      return true;
+    if (typeof props.config.addable === 'function') {
+      return Boolean(
+        props.config.addable(mForm, {
+          model: props.model[modelName],
+          formValue: mForm?.values,
+          prop: props.prop,
+          config: props.config,
+        }),
+      );
     }
 
-    if (typeof props.config.addable === 'function') {
-      return props.config.addable(mForm, {
-        model: props.model[modelName],
-        formValue: mForm?.values,
-        prop: props.prop,
-        config: props.config,
-      });
+    if (!props.model[modelName]?.length) {
+      return true;
     }
 
-    return typeof props.config.addable === 'undefined' ? true : props.config.addable;
+    return typeof props.config.addable === 'undefined' ? true : Boolean(props.config.addable);
   });
 
-  const newHandler = async (row?: any) => {
-    const modelName = props.name || props.config.name || '';
-
-    if (props.config.max && props.model[modelName].length >= props.config.max) {
+  /**
+   * 新增一项，返回新增后列表应有的长度；没有新增（超上限 / 被 beforeAddRow 拦下 / enum 用尽）返回 null。
+   *
+   * 只抛 change，不直接改 `props.model`：写回由 `MForm` 按 changeRecords 的 propPath 完成。
+   * 返回长度是给调用方用的——新项要等写回后才出现在 DOM 里，靠它才能判断等到了没有。
+   */
+  const newHandler = async (row?: any): Promise<number | null> => {
+    const modelName = `${props.name || props.config.name || ''}`;
+    const list: any[] = Array.isArray(props.model[modelName]) ? props.model[modelName] : [];
+
+    if (props.config.max && list.length >= props.config.max) {
       tMagicMessage.error(`最多新增配置不能超过${props.config.max}条`);
-      return;
+      return null;
     }
 
     if (typeof props.config.beforeAddRow === 'function') {
       const beforeCheckRes = await props.config.beforeAddRow(mForm, {
-        model: props.model[modelName],
+        model: list,
         formValue: mForm?.values,
         prop: props.prop,
       });
-      if (!beforeCheckRes) return;
+      if (!beforeCheckRes) return null;
     }
 
     const columns = props.config.items;
     const enumValues = props.config.enum || [];
     let enumV = [];
-    const { length } = props.model[modelName];
+    const { length } = list;
     const key = props.config.key || 'id';
     let inputs: any = {};
 
     if (enumValues.length) {
       if (length >= enumValues.length) {
-        return;
+        return null;
       }
       enumV = enumValues.filter((item) => {
         let i = 0;
         for (; i < length; i++) {
-          if (item[key] === props.model[modelName][i][key]) {
+          if (item[key] === list[i][key]) {
             break;
           }
         }
@@ -87,7 +98,7 @@ export const useAdd = (
     } else {
       if (typeof props.config.defaultAdd === 'function') {
         inputs = await props.config.defaultAdd(mForm, {
-          model: props.model[modelName],
+          model: list,
           prop: props.prop,
           formValue: mForm?.values,
         });
@@ -101,18 +112,22 @@ export const useAdd = (
       });
     }
 
+    // enum / Excel 导入的数组行与默认新增共用同一份规整，字段组件不再在 setup 里改 model
+    applyMountValueEffects(mForm, columns as FormConfig, inputs);
+
     if (props.sortKey && length) {
-      inputs[props.sortKey] = props.model[modelName][length - 1][props.sortKey] - 1;
+      inputs[props.sortKey] = list[length - 1][props.sortKey] - 1;
     }
 
-    emit('change', [...props.model[modelName], inputs], {
+    emit('change', [...list, inputs], {
       changeRecords: [
         {
-          propPath: `${props.prop}.${props.model[modelName].length}`,
+          propPath: `${props.prop}.${length}`,
           value: inputs,
         },
       ],
     });
+    return length + 1;
   };
 
   return {

package/src/containers/table-group-list/useScrollLastItemIntoView.ts

@@ -0,0 +1,94 @@
+import { nextTick, type Ref } from 'vue';
+
+type ListRef = Ref<{ $el?: unknown } | HTMLElement | null | undefined>;
+
+interface ScrollTarget {
+  root: HTMLElement;
+  last: HTMLElement | null;
+  count: number;
+}
+
+const nextFrame = () => new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+
+/** 滚动要用的列表根与最后一项；组件已卸载（宿主重建了整棵表单）时返回 null */
+const resolveScrollTarget = (listRef: ListRef): ScrollTarget | null => {
+  const inst = listRef.value;
+  const root = inst instanceof HTMLElement ? inst : inst?.$el;
+  if (!(root instanceof HTMLElement)) return null;
+
+  const items = root.querySelectorAll(':scope > .m-fields-group-list-item');
+  const last = items[items.length - 1];
+  return { root, last: last instanceof HTMLElement ? last : null, count: items.length };
+};
+
+/** 吸顶标题自身的高度：滚动后新项的标题不能被上一层标题压住 */
+const getStickyHeaderOffset = (item: HTMLElement): number => {
+  const header = item.querySelector(':scope > .el-card__header, :scope > .t-card__header');
+  if (!(header instanceof HTMLElement)) return 0;
+  return Number.parseFloat(getComputedStyle(header).top) || 0;
+};
+
+/** 吸底「新增」按钮盖住的高度；嵌套列表的 footer 还用 bottom 给外层按钮留了位 */
+const getStickyFooterOffset = (root: HTMLElement): number => {
+  const footer = root.querySelector(':scope > .m-fields-group-list-footer.is-sticky-full');
+  if (!(footer instanceof HTMLElement)) return 0;
+  return footer.getBoundingClientRect().height + (Number.parseFloat(getComputedStyle(footer).bottom) || 0);
+};
+
+/**
+ * 等列表渲染出至少 `expectedCount` 项、且最后一项的 DOM 节点连续两帧不变再返回。
+ *
+ * 新增只抛 change，写回要经过宿主（如编辑器属性面板）的异步校验与表单值重建，
+ * 新项不一定当帧就出现；期间宿主还可能自己再追加项，末尾节点会换掉。
+ * 只判「节点不变」会滚到旧的最后一项上，所以先等够数量再等稳定。
+ */
+const waitForStableTarget = async (
+  listRef: ListRef,
+  expectedCount: number,
+  timeout = 600,
+): Promise<ScrollTarget | null> => {
+  const deadline = Date.now() + timeout;
+  let previous: HTMLElement | null = null;
+
+  while (Date.now() < deadline) {
+    const target = resolveScrollTarget(listRef);
+    if (!target) return null;
+    if (target.count >= expectedCount && target.last && target.last === previous) return target;
+    previous = target.last;
+    await nextFrame();
+  }
+
+  return resolveScrollTarget(listRef);
+};
+
+/**
+ * 新增后把最后一项滚进视口，避开吸顶标题与吸底按钮。
+ *
+ * `enabled` 为 false（未开配置、或不在 group-list 形态）时直接返回。
+ */
+export const useScrollLastItemIntoView = (listRef: ListRef, enabled: () => boolean) => {
+  const scrollLastItemIntoView = async (expectedCount: number) => {
+    if (!enabled()) return;
+
+    // 先让已经同步写回的那部分渲染出来，稳定判定的第一帧就能拿到新项，少等一帧
+    await nextTick();
+
+    const target = await waitForStableTarget(listRef, expectedCount);
+    if (!target?.last) return;
+
+    const { root, last } = target;
+
+    // 新项是追加在末尾的，下方往往没有多余内容可滚，用 `start` 会被浏览器夹住、
+    // 仍压在吸底按钮下面。`nearest` 只滚到刚好露出，配合两侧 scroll-margin 避开吸顶标题与吸底按钮。
+    const top = getStickyHeaderOffset(last);
+    const bottom = getStickyFooterOffset(root);
+    last.style.scrollMarginTop = top ? `${top}px` : '';
+    last.style.scrollMarginBottom = bottom ? `${bottom}px` : '';
+
+    // 用瞬时定位而不是 smooth：平滑滚动要持续几百毫秒，期间宿主的回写重绘会把滚动位置改掉，
+    // 动画继续奔向旧目标，看起来就是「先弹回顶部再滚下来」。瞬时定位没有这个窗口。
+    last.scrollIntoView({ behavior: 'auto', block: 'nearest' });
+  };
+
+  return { scrollLastItemIntoView };
+};

package/src/fields/{CheckboxGroup.vue → CheckboxGroup/Index.vue}

@@ -11,9 +11,9 @@ import { computed, inject } from 'vue';
 
 import { TMagicCheckbox, TMagicCheckboxGroup } from '@tmagic/design';
 
-import type { CheckboxGroupConfig, CheckboxGroupOption, FieldProps, FormState } from '../schema';
-import { filterFunction } from '../utils/form';
-import { useAddField } from '../utils/useAddField';
+import type { CheckboxGroupConfig, CheckboxGroupOption, FieldProps, FormState } from '@form/schema';
+import { filterFunction } from '@form/utils/form';
+import { useAddField } from '@form/utils/useAddField';
 
 defineOptions({
   name: 'MFormCheckGroup',
@@ -25,11 +25,6 @@ const emit = defineEmits(['change']);
 
 useAddField(props.prop);
 
-// 初始化选项
-if (props.model && !props.model[props.name]) {
-  props.model[props.name] = [];
-}
-
 const changeHandler = (v: Array<string | number | boolean>) => {
   emit('change', v);
 };

package/src/fields/CheckboxGroup/effect.ts

@@ -0,0 +1,27 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { FieldMountValueEffect } from '@form/utils/fieldValueEffects';
+
+/** 空值初始化为空数组。 */
+export const effect: FieldMountValueEffect = ({ config, model }) => {
+  const { name } = config as any;
+  if (model && !model[name]) {
+    model[name] = [];
+  }
+};

package/src/fields/{Date.vue → Date/Index.vue}

@@ -14,9 +14,8 @@
 <script lang="ts" setup>
 import { TMagicDatePicker } from '@tmagic/design';
 
-import type { DateConfig, FieldProps } from '../schema';
-import { datetimeFormatter } from '../utils/form';
-import { useAddField } from '../utils/useAddField';
+import type { DateConfig, FieldProps } from '@form/schema';
+import { useAddField } from '@form/utils/useAddField';
 
 defineOptions({
   name: 'MFormDate',
@@ -30,8 +29,6 @@ const emit = defineEmits<{
 
 useAddField(props.prop);
 
-props.model[props.name] = datetimeFormatter(props.model[props.name], '', props.config.valueFormat || 'YYYY/MM/DD');
-
 const changeHandler = (v: string) => {
   emit('change', v);
 };

package/src/fields/Date/effect.ts

@@ -0,0 +1,29 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DateConfig } from '@form/schema';
+import type { FieldMountValueEffect } from '@form/utils/fieldValueEffects';
+import { datetimeFormatter } from '@form/utils/form';
+
+/** 按 `valueFormat` 归一化日期值。 */
+export const effect: FieldMountValueEffect = ({ config, model }) => {
+  if (!model) return;
+
+  const { name, valueFormat } = config as DateConfig & { name: string };
+  model[name] = datetimeFormatter(model[name], '', valueFormat || 'YYYY/MM/DD');
+};

package/src/fields/{DateTime.vue → DateTime/Index.vue}

@@ -16,9 +16,8 @@
 <script lang="ts" setup>
 import { TMagicDatePicker } from '@tmagic/design';
 
-import type { DateTimeConfig, FieldProps } from '../schema';
-import { datetimeFormatter } from '../utils/form';
-import { useAddField } from '../utils/useAddField';
+import type { DateTimeConfig, FieldProps } from '@form/schema';
+import { useAddField } from '@form/utils/useAddField';
 
 defineOptions({
   name: 'MFormDateTime',
@@ -32,19 +31,6 @@ const emit = defineEmits<{
 
 useAddField(props.prop);
 
-const value = props.model?.[props.name]?.toString();
-if (props.model) {
-  if (!value || value === 'Invalid Date') {
-    props.model[props.name] = '';
-  } else {
-    props.model[props.name] = datetimeFormatter(
-      props.model[props.name],
-      '',
-      props.config.valueFormat || 'YYYY/MM/DD HH:mm:ss',
-    );
-  }
-}
-
 const changeHandler = (v: string) => {
   emit('change', v);
 };

package/src/fields/DateTime/effect.ts

@@ -0,0 +1,36 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DateTimeConfig } from '@form/schema';
+import type { FieldMountValueEffect } from '@form/utils/fieldValueEffects';
+import { datetimeFormatter } from '@form/utils/form';
+
+/** 按 `valueFormat` 归一化日期时间值，空值与非法值统一为空字符串。 */
+export const effect: FieldMountValueEffect = ({ config, model }) => {
+  if (!model) return;
+
+  const { name, valueFormat } = config as DateTimeConfig & { name: string };
+  const value = model[name]?.toString();
+
+  if (!value || value === 'Invalid Date') {
+    model[name] = '';
+    return;
+  }
+
+  model[name] = datetimeFormatter(model[name], '', valueFormat || 'YYYY/MM/DD HH:mm:ss');
+};

package/src/fields/{Display.vue → Display/Index.vue}

@@ -5,9 +5,9 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import type { DisplayConfig, FieldProps, FormState } from '../schema';
-import { filterFunction } from '../utils/form';
-import { useAddField } from '../utils/useAddField';
+import type { DisplayConfig, FieldProps, FormState } from '@form/schema';
+import { filterFunction } from '@form/utils/form';
+import { useAddField } from '@form/utils/useAddField';
 
 defineOptions({
   name: 'MFormDisplay',
@@ -17,10 +17,6 @@ const props = defineProps<FieldProps<DisplayConfig>>();
 
 const mForm = inject<FormState | undefined>('mForm');
 
-if (props.config.initValue && props.model) {
-  props.model[props.name] = props.config.initValue;
-}
-
 const text = computed(() => {
   if (props.config.displayText) {
     return filterFunction<string>(mForm, props.config.displayText, props);

package/src/fields/Display/effect.ts

@@ -0,0 +1,28 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DisplayConfig } from '@form/schema';
+import type { FieldMountValueEffect } from '@form/utils/fieldValueEffects';
+
+/** 把 `initValue` 写入 model。 */
+export const effect: FieldMountValueEffect = ({ config, model }) => {
+  const { initValue, name } = config as DisplayConfig & { name: string };
+  if (initValue && model) {
+    model[name] = initValue;
+  }
+};

package/src/fields/{DynamicField.vue → DynamicField/Index.vue}

@@ -27,9 +27,11 @@ import { onBeforeUnmount, reactive, watch } from 'vue';
 
 import { TMagicForm, TMagicFormItem, TMagicInput } from '@tmagic/design';
 
-import type { DynamicFieldConfig, FieldProps } from '../schema';
-import { getConfig } from '../utils/config';
-import { useAddField } from '../utils/useAddField';
+import type { DynamicFieldConfig, FieldProps } from '@form/schema';
+import { getConfig } from '@form/utils/config';
+import { useAddField } from '@form/utils/useAddField';
+
+import { eachDynamicField } from './effect';
 
 defineOptions({
   name: 'MFormDynamicField',
@@ -54,15 +56,13 @@ const changeFieldMap = async () => {
   const fields = await props.config.returnFields(props.config, props.model, request);
   fieldMap.value = {};
   fieldLabelMap.value = {};
-  fields.forEach((v) => {
-    if (typeof v !== 'object' || v.name === undefined) return;
-    let oldVal = props.model?.[v.name] || '';
-    if (!oldVal && v.defaultValue !== undefined) {
-      oldVal = v.defaultValue;
-      emit('change', oldVal, { modifyKey: v.name });
+  eachDynamicField(fields, props.model, (field, value, isDefaultApplied) => {
+    // 取了 defaultValue 的字段需要写回表单值
+    if (isDefaultApplied) {
+      emit('change', value, { modifyKey: field.name });
     }
-    fieldMap.value[v.name] = oldVal;
-    fieldLabelMap.value[v.name] = v.label || '';
+    fieldMap.value[field.name] = value;
+    fieldLabelMap.value[field.name] = field.label || '';
   });
 };
 

package/src/fields/DynamicField/effect.ts

@@ -0,0 +1,74 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { setValueByKeyPath } from '@tmagic/utils';
+
+import type { DynamicFieldConfig, FormValue } from '@form/schema';
+import { getConfig } from '@form/utils/config';
+import type { FieldMountValueEffect } from '@form/utils/fieldValueEffects';
+
+/** `dynamic-field` 的 `returnFields` 返回的单个字段描述 */
+type DynamicFieldItem = ReturnType<DynamicFieldConfig['returnFields']>[number];
+
+/**
+ * 遍历动态字段列表，按「原值为空且声明了 defaultValue 则取默认值」求出每个字段当前的值。
+ *
+ * `isDefaultApplied` 为真表示该值来自 `defaultValue`，需要写回表单值
+ * （组件通过 emit change 写回，初始化写入直接写 `values`）。
+ */
+export const eachDynamicField = (
+  fields: DynamicFieldItem[],
+  model: FormValue | undefined,
+  onField: (_field: DynamicFieldItem, _value: any, _isDefaultApplied: boolean) => void,
+): void => {
+  for (const field of fields) {
+    if (typeof field !== 'object' || field?.name === undefined) continue;
+
+    let value = model?.[field.name] || '';
+    let isDefaultApplied = false;
+
+    if (!value && field.defaultValue !== undefined) {
+      value = field.defaultValue;
+      isDefaultApplied = true;
+    }
+
+    onField(field, value, isDefaultApplied);
+  }
+};
+
+/**
+ * 同步 `returnFields` 的 defaultValue 按 prop 写入值根对象。
+ *
+ * 该组件读取的是同级 model，但写入走 Container 的 modifyKey 分支，落在 `${prop}.${key}`，
+ * 这里保持与渲染一致（含这层不对称），避免两条链路产出不同的值。
+ * 异步 returnFields 由组件挂载后的 watch 负责，此处不等待。
+ */
+export const effect: FieldMountValueEffect = ({ config, model, prop, values }) => {
+  const { returnFields, dynamicKey } = config as DynamicFieldConfig;
+  if (typeof returnFields !== 'function' || !model) return;
+  if (model[dynamicKey] === '') return;
+
+  const result = returnFields(config as DynamicFieldConfig, model, getConfig<Function>('request'));
+  if (!result || typeof (result as any).then === 'function' || !Array.isArray(result)) return;
+
+  eachDynamicField(result, model, (field, value, isDefaultApplied) => {
+    if (isDefaultApplied) {
+      setValueByKeyPath(`${prop}.${field.name}`, value, values || model);
+    }
+  });
+};

package/src/fields/{NumberRange.vue → NumberRange/Index.vue}

@@ -23,8 +23,8 @@ import { ref, watch } from 'vue';
 
 import { TMagicInput } from '@tmagic/design';
 
-import type { FieldProps, NumberRangeConfig } from '../schema';
-import { useAddField } from '../utils/useAddField';
+import type { FieldProps, NumberRangeConfig } from '@form/schema';
+import { useAddField } from '@form/utils/useAddField';
 
 defineOptions({
   name: 'MFormNumberRange',
@@ -53,10 +53,6 @@ watch(
 
 useAddField(props.prop);
 
-if (!Array.isArray(props.model[props.name])) {
-  props.model[props.name] = [];
-}
-
 const minChangeHandler = (v: string) => {
   emit('change', [Number(v), props.model[props.name][1]]);
 };

package/src/fields/NumberRange/effect.ts

@@ -0,0 +1,27 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { FieldMountValueEffect } from '@form/utils/fieldValueEffects';
+
+/** 值不是数组时修正为空数组。 */
+export const effect: FieldMountValueEffect = ({ config, model }) => {
+  const { name } = config as any;
+  if (model && !Array.isArray(model[name])) {
+    model[name] = [];
+  }
+};

package/src/fields/Select.vue

@@ -57,7 +57,7 @@
       <component
         v-for="option in options as SelectOption[]"
         class="tmagic-design-option"
-        :key="config.valueKey ? option.value[config.valueKey] : option.value"
+        :key="config.valueKey ? option.value?.[config.valueKey] : option.value"
         :is="optionComponent?.component || 'el-option'"
         v-bind="
           optionComponent?.props({
@@ -372,7 +372,12 @@ const getInitOption = async () => {
     });
   }
 
-  let initData = getValueByKeyPath(initRoot || root, res);
+  let initData: any;
+  try {
+    initData = getValueByKeyPath(initRoot || root, res);
+  } catch {
+    // 响应中不存在 initRoot/root 路径时按无数据处理
+  }
   if (initData) {
     if (!Array.isArray(initData)) {
       initData = [initData];
@@ -417,8 +422,12 @@ if (typeof props.config.options === 'function') {
     const v = props.model[props.name];
     if (Array.isArray(v) ? !v.length : typeof v === 'undefined') return;
     if (typeof v === 'undefined' || hasOption(v)) return;
-    const data = await getInitOption();
-    setOptions(data);
+    try {
+      const data = await getInitOption();
+      setOptions(data);
+    } catch {
+      setOptions([]);
+    }
   };
 
   watch(