@tmagic/form 1.8.0-beta.0 → 1.8.0-beta.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.0",
+  "version": "1.8.0-beta.2",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -52,9 +52,9 @@
   "peerDependencies": {
     "vue": "^3.5.34",
     "typescript": "^6.0.3",
-    "@tmagic/utils": "1.8.0-beta.0",
-    "@tmagic/design": "1.8.0-beta.0",
-    "@tmagic/form-schema": "1.8.0-beta.0"
+    "@tmagic/design": "1.8.0-beta.2",
+    "@tmagic/form-schema": "1.8.0-beta.2",
+    "@tmagic/utils": "1.8.0-beta.2"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Form.vue

@@ -22,7 +22,11 @@
         :step-active="stepActive"
         :size="size"
         @change="changeHandler"
-      ></Container>
+      >
+        <template v-if="$slots.label" #label="labelProps">
+          <slot name="label" v-bind="labelProps"></slot>
+        </template>
+      </Container>
     </template>
   </TMagicForm>
 </template>
@@ -37,12 +41,23 @@ import { setValueByKeyPath } from '@tmagic/utils';
 import Container from './containers/Container.vue';
 import { getConfig } from './utils/config';
 import { initValue } from './utils/form';
-import type { ChangeRecord, ContainerChangeEventData, FormConfig, FormState, FormValue, ValidateError } from './schema';
+import type {
+  ChangeRecord,
+  ContainerChangeEventData,
+  FormConfig,
+  FormSlots,
+  FormState,
+  FormValue,
+  ValidateError,
+} from './schema';
+import { FORM_DIFF_CONFIG_KEY } from './schema';
 
 defineOptions({
   name: 'MForm',
 });
 
+defineSlots<FormSlots>();
+
 const props = withDefaults(
   defineProps<{
     /** 表单配置 */
@@ -65,6 +80,33 @@ const props = withDefaults(
     popperClass?: string;
     preventSubmitDefault?: boolean;
     extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+    /**
+     * 自定义"是否展示对比内容"的判断函数（仅在 `isCompare === true` 时生效）。
+     *
+     * - 不传：使用默认逻辑 `!isEqual(curValue, lastValue)`；
+     * - 传函数：完全以函数返回值为准，返回 `true` 才展示前后两份对比内容。
+     *
+     * 通过 provide 下发给所有层级的 Container（含嵌套在容器组件内部的 Container），
+     * 调用方只需在 MForm 这一层传一次即可对整棵表单生效。
+     *
+     * 典型场景：某些字段语义上相等但结构不同（例如 `code-select` 字段中 `''` 与
+     * `{ hookType: 'code', hookData: [] }` 应视为相等），调用方在此处显式声明，
+     * 避免被 lodash `isEqual` 误判为差异。
+     */
+    showDiff?: (_data: { curValue: any; lastValue: any; config: any }) => boolean;
+    /**
+     * 自定义「自接管对比」的字段类型（仅在对比模式下生效）。
+     *
+     * 自接管对比的字段不会渲染前后两份独立组件，而是只渲染一次并由字段组件内部展示前后差异
+     * （如 vs-code 使用 monaco diff 编辑器；event-select / code-select-col 等复合字段逐项展示差异）。
+     *
+     * 支持两种形式：
+     * - 传数组：在内置类型基础上「追加」这些类型；
+     * - 传函数：入参为内置类型数组，返回值作为「最终」完整列表（可完全替换内置项）。
+     *
+     * 通过 provide 下发，对整棵表单的所有层级 Container 生效，只需在 MForm 这一层传一次。
+     */
+    selfDiffFieldTypes?: string[] | ((_defaultTypes: string[]) => string[]);
   }>(),
   {
     config: () => [],
@@ -92,14 +134,45 @@ const fields = new Map<string, any>();
 
 const requestFuc = getConfig('request') as Function;
 
+/**
+ * formState 实现说明：
+ *
+ * 1. 与 props 直接对应的字段（config / initValues / lastValues / isCompare / parentValues /
+ *    keyProp / popperClass）使用「访问器（getter）」定义，每次读取都会回到 `props.xxx`
+ *    取最新值，不存在「props 变了但 formState 还没同步过来」的中间态。
+ *
+ * 2. `values` / `lastValuesProcessed` 是 ref，Vue 的 `reactive` 会自动解包，因此每次
+ *    访问 `formState.values` / `formState.lastValuesProcessed` 也都是当前 ref 值。
+ *
+ * 3. `extendState` 注入的字段在下方的 `watchEffect` 中合并到 `formState`：
+ *    - data 描述符（普通字段）通过 `formState[key] = value` 写入，走 reactive proxy 的
+ *      set，触发依赖通知；`extendState` 同步段读到的响应式数据变化时会自动重跑，
+ *      把最新值刷进 formState。
+ *    - accessor 描述符（`{ get stage() { return ... } }`）按原样写入，调用方可以控制
+ *      读时求值，每次读取都会重新执行 getter。
+ */
 const formState: FormState = reactive<FormState>({
-  keyProp: props.keyProp,
-  popperClass: props.popperClass,
-  config: props.config,
-  initValues: props.initValues,
-  isCompare: props.isCompare,
-  lastValues: props.lastValues,
-  parentValues: props.parentValues,
+  get keyProp() {
+    return props.keyProp;
+  },
+  get popperClass() {
+    return props.popperClass;
+  },
+  get config() {
+    return props.config;
+  },
+  get initValues() {
+    return props.initValues;
+  },
+  get isCompare() {
+    return props.isCompare;
+  },
+  get lastValues() {
+    return props.lastValues;
+  },
+  get parentValues() {
+    return props.parentValues;
+  },
   values,
   lastValuesProcessed,
   $emit: emit as (_event: string, ..._args: any[]) => void,
@@ -119,25 +192,68 @@ const formState: FormState = reactive<FormState>({
   },
 });
 
-watchEffect(async () => {
-  formState.initValues = props.initValues;
-  formState.lastValues = props.lastValues;
-  formState.isCompare = props.isCompare;
-  formState.config = props.config;
-  formState.keyProp = props.keyProp;
-  formState.popperClass = props.popperClass;
-  formState.parentValues = props.parentValues;
-
-  if (typeof props.extendState === 'function') {
-    const state = (await props.extendState(formState)) || {};
-    Object.entries(state).forEach(([key, value]) => {
-      formState[key] = value;
-    });
+/**
+ * `extendState` 的同步段（直到第一个 `await` 之前）所访问的任何响应式数据，
+ * 都会被 `watchEffect` 自动跟踪。这样可以兼容历史用法 ——
+ *
+ *   extendState: (formState) => ({
+ *     username: store.username,   // 同步读 store，会被跟踪
+ *     env: store.env,
+ *   })
+ *
+ * 当 `store.username` 变化时，整个 effect 重跑，新值会被刷进 `formState`。
+ *
+ * prop 派生字段（initValues / config / ...）已经在上方用 getter 定义，
+ * 这里不再重复同步；因此 `props.initValues` 这类高频变化也不会再触发
+ * `extendState` 重跑（旧版的性能问题修复点）。
+ *
+ * 实现细节：
+ * - data 描述符：通过 `formState[key] = value` 走 reactive proxy 的 set，
+ *   触发依赖通知；与旧版「逐项赋值」语义完全等价。
+ * - accessor 描述符（`{ get stage() {...} }`）按原样写入 formState，调用方
+ *   可以自行控制读时求值；强制 `configurable: true` 以便下一次重跑可再 define。
+ */
+watchEffect(async (onCleanup) => {
+  const { extendState } = props;
+  if (typeof extendState !== 'function') return;
+
+  let stale = false;
+  onCleanup(() => {
+    stale = true;
+  });
+
+  let state: Record<string, any> = {};
+  try {
+    state = (await extendState(formState)) || {};
+  } catch (e) {
+    console.error('[MForm] extendState failed:', e);
+    return;
+  }
+  if (stale) return;
+
+  for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(state))) {
+    if ('value' in descriptor) {
+      (formState as any)[key] = (state as any)[key];
+    } else {
+      descriptor.configurable = true;
+      Object.defineProperty(formState, key, descriptor);
+    }
   }
 });
 
 provide('mForm', formState);
 
+// 对比相关配置单独通过 provide 下发，所有层级的 Container 通过 inject 获取，无需逐层透传 prop。
+// 用 getter 对象保证读取时回到最新的 props 值，维持响应式。
+provide(FORM_DIFF_CONFIG_KEY, {
+  get showDiff() {
+    return props.showDiff;
+  },
+  get selfDiffFieldTypes() {
+    return props.selfDiffFieldTypes;
+  },
+});
+
 const changeRecords = shallowRef<ChangeRecord[]>([]);
 
 watch(

package/src/containers/Container.vue

@@ -25,13 +25,15 @@
     <template v-else-if="type && display && !showDiff">
       <TMagicFormItem v-bind="formItemProps" :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }">
         <template #label>
-          <FormLabel
-            :tip="config.tip"
-            :type="type"
-            :use-label="(config as CheckboxConfig).useLabel"
-            :label-title="config.labelTitle"
-            :text="text"
-          ></FormLabel>
+          <slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
+            <FormLabel
+              :tip="config.tip"
+              :type="type"
+              :use-label="(config as CheckboxConfig).useLabel"
+              :label-title="config.labelTitle"
+              :text="text"
+            ></FormLabel>
+          </slot>
         </template>
 
         <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
@@ -71,68 +73,126 @@
 
     <!-- 对比 -->
     <template v-else-if="type && display && showDiff">
-      <!-- 上次内容 -->
+      <!-- 自接管对比的字段类型（如 vs-code）：只渲染一次组件，由字段内部用 diff 编辑器/视图自行展示前后差异 -->
       <TMagicFormItem
+        v-if="isSelfDiffField"
         v-bind="formItemProps"
-        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
+        :class="{
+          'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text,
+          'self-diff': true,
+        }"
       >
         <template #label>
-          <FormLabel
-            :tip="config.tip"
-            :type="type"
-            :use-label="(config as CheckboxConfig).useLabel"
-            :label-title="config.labelTitle"
-            :text="text"
-          ></FormLabel>
+          <slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
+            <FormLabel
+              :tip="config.tip"
+              :type="type"
+              :use-label="(config as CheckboxConfig).useLabel"
+              :label-title="config.labelTitle"
+              :text="text"
+            ></FormLabel>
+          </slot>
         </template>
         <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
-          <component v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
+          <component
+            v-bind="fieldsProps"
+            :is="tagName"
+            :model="model"
+            :last-values="lastValues"
+            :is-compare="isCompare"
+            @change="onChangeHandler"
+          ></component>
           <template #content>
             <div v-html="tooltip.text"></div>
           </template>
         </TMagicTooltip>
 
-        <component v-else v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
+        <component
+          v-else
+          v-bind="fieldsProps"
+          :is="tagName"
+          :model="model"
+          :last-values="lastValues"
+          :is-compare="isCompare"
+          @change="onChangeHandler"
+        ></component>
       </TMagicFormItem>
 
-      <TMagicTooltip v-if="config.tip && type === 'checkbox' && !(config as CheckboxConfig).useLabel" placement="top">
-        <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
-        <template #content>
-          <div v-html="config.tip"></div>
-        </template>
-      </TMagicTooltip>
+      <!-- 普通字段：渲染前后两份独立的组件用于对比 -->
+      <template v-else>
+        <!-- 上次内容 -->
+        <TMagicFormItem
+          v-bind="formItemProps"
+          :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-before-diff': true }"
+        >
+          <template #label>
+            <slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
+              <FormLabel
+                :tip="config.tip"
+                :type="type"
+                :use-label="(config as CheckboxConfig).useLabel"
+                :label-title="config.labelTitle"
+                :text="text"
+              ></FormLabel>
+            </slot>
+          </template>
+          <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
+            <component v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
+            <template #content>
+              <div v-html="tooltip.text"></div>
+            </template>
+          </TMagicTooltip>
 
-      <!-- 当前内容 -->
-      <TMagicFormItem
-        v-bind="formItemProps"
-        :style="config.tip ? 'flex: 1' : ''"
-        :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
-      >
-        <template #label>
-          <FormLabel
-            :tip="config.tip"
-            :type="type"
-            :use-label="(config as CheckboxConfig).useLabel"
-            :label-title="config.labelTitle"
-            :text="text"
-          ></FormLabel>
-        </template>
-        <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
-          <component v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
+          <component
+            v-else
+            v-bind="fieldsProps"
+            :is="tagName"
+            :model="lastValues"
+            @change="onChangeHandler"
+          ></component>
+        </TMagicFormItem>
+
+        <TMagicTooltip v-if="config.tip && type === 'checkbox' && !(config as CheckboxConfig).useLabel" placement="top">
+          <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
           <template #content>
-            <div v-html="tooltip.text"></div>
+            <div v-html="config.tip"></div>
           </template>
         </TMagicTooltip>
 
-        <component v-else v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
-      </TMagicFormItem>
-
-      <TMagicTooltip v-if="config.tip && type === 'checkbox' && !(config as CheckboxConfig).useLabel" placement="top">
-        <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
-        <template #content>
-          <div v-html="config.tip"></div>
-        </template>
-      </TMagicTooltip>
+        <!-- 当前内容 -->
+        <TMagicFormItem
+          v-bind="formItemProps"
+          :style="config.tip ? 'flex: 1' : ''"
+          :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-after-diff': true }"
+        >
+          <template #label>
+            <slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
+              <FormLabel
+                :tip="config.tip"
+                :type="type"
+                :use-label="(config as CheckboxConfig).useLabel"
+                :label-title="config.labelTitle"
+                :text="text"
+              ></FormLabel>
+            </slot>
+          </template>
+          <TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
+            <component v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
+            <template #content>
+              <div v-html="tooltip.text"></div>
+            </template>
+          </TMagicTooltip>
+
+          <component v-else v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
+        </TMagicFormItem>
+
+        <TMagicTooltip v-if="config.tip && type === 'checkbox' && !(config as CheckboxConfig).useLabel" placement="top">
+          <TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
+          <template #content>
+            <div v-html="config.tip"></div>
+          </template>
+        </TMagicTooltip>
+      </template>
     </template>
 
     <template v-else-if="items && display">
@@ -152,7 +212,11 @@
           :prop="itemProp"
           @change="onChangeHandler"
           @addDiffCount="onAddDiffCount"
-        ></Container>
+        >
+          <template v-if="$slots.label" #label="labelProps">
+            <slot name="label" v-bind="labelProps"></slot>
+          </template>
+        </Container>
       </template>
     </template>
 
@@ -178,11 +242,14 @@ import type {
   ComponentConfig,
   ContainerChangeEventData,
   ContainerCommonConfig,
+  FormDiffConfig,
   FormItemConfig,
+  FormSlots,
   FormState,
   FormValue,
   ToolTipConfigType,
 } from '../schema';
+import { FORM_DIFF_CONFIG_KEY } from '../schema';
 import { getField } from '../utils/config';
 import { createObjectProp, display as displayFunction, filterFunction, getRules } from '../utils/form';
 
@@ -192,6 +259,8 @@ defineOptions({
   name: 'MFormContainer',
 });
 
+defineSlots<FormSlots>();
+
 const props = withDefaults(
   defineProps<{
     /** 表单值 */
@@ -224,14 +293,28 @@ const emit = defineEmits<{
 
 const mForm = inject<FormState | undefined>('mForm');
 
+// 对比相关配置由 MForm 通过 provide 下发，这里直接 inject，无需逐层透传 prop。
+const diffConfig = inject<FormDiffConfig>(FORM_DIFF_CONFIG_KEY, {});
+
 const expand = ref(false);
 
 const name = computed(() => props.config.name || '');
+
 // 是否展示两个版本的对比内容
+//
+// 默认逻辑：在对比模式下用 lodash isEqual 比较当前值与历史值，不相等则展示对比。
+// 若调用方通过 MForm 的 `showDiff` 注入了自定义判断函数，则完全以其返回值为准，
+// 便于业务侧自定义"语义上相等"的特殊场景（例如空字符串与空 hook 结构）。
 const showDiff = computed(() => {
   if (!props.isCompare) return false;
   const curValue = name.value ? props.model[name.value] : props.model;
   const lastValue = name.value ? props.lastValues[name.value] : props.lastValues;
+
+  const customShowDiff = diffConfig.showDiff;
+  if (typeof customShowDiff === 'function') {
+    return Boolean(customShowDiff({ curValue, lastValue, config: props.config }));
+  }
+
   return !isEqual(curValue, lastValue);
 });
 
@@ -268,6 +351,45 @@ const tagName = computed(() => {
   return getField(type.value || 'container') || `m-${items.value ? 'form' : 'fields'}-${type.value}`;
 });
 
+/**
+ * 自接管对比的字段类型白名单。
+ *
+ * 这类字段在 `isCompare === true` 且存在差异时，不再由 Container 渲染前后两份独立组件来对比，
+ * 而是只渲染一次组件，将 `model` / `lastValues` / `isCompare` 一并传给字段组件，
+ * 由字段组件内部自行展示前后差异（典型场景：vs-code 字段使用 monaco 自带的 diff 编辑器）。
+ *
+ * 这样做的好处：
+ * 1. 避免重型字段（如 monaco 编辑器）在对比模式下被实例化两次，节省资源；
+ * 2. 提供更专业的对比视觉效果（如 monaco diff 的行级高亮、左右滚动同步等）。
+ *
+ * 注意：像 `event-select` / `code-select-col` 这类内部由列表 / 嵌套子表单组成的复合字段，若按默认逻辑
+ * 渲染前后两份独立组件，会出现两套下拉框 + 两份参数表单（或两套「添加事件」按钮、两份完整面板），
+ * 体验很差。这类字段在内部把 `is-compare`/`lastValues` 透传给子级容器，由子级逐项展示差异，
+ * 因此同样归类为自接管对比字段。
+ */
+const DEFAULT_SELF_DIFF_FIELD_TYPES = ['vs-code', 'event-select', 'code-select-col', 'code-select'];
+
+// 最终生效的自接管对比字段类型集合。
+//
+// - 未自定义：使用内置默认类型；
+// - 自定义传数组：在内置类型基础上「追加」；
+// - 自定义传函数：以函数返回值为「最终」完整列表（可完全替换内置项）。
+const effectiveSelfDiffFieldTypes = computed<Set<string>>(() => {
+  const custom = diffConfig.selfDiffFieldTypes;
+
+  if (typeof custom === 'function') {
+    return new Set(custom([...DEFAULT_SELF_DIFF_FIELD_TYPES]));
+  }
+
+  if (Array.isArray(custom)) {
+    return new Set([...DEFAULT_SELF_DIFF_FIELD_TYPES, ...custom]);
+  }
+
+  return new Set(DEFAULT_SELF_DIFF_FIELD_TYPES);
+});
+
+const isSelfDiffField = computed(() => effectiveSelfDiffFieldTypes.value.has(type.value));
+
 const disabled = computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
 
 const text = computed(() => filterFunction(mForm, props.config.text, props));

package/src/containers/GroupList.vue

@@ -26,7 +26,7 @@
       @addDiffCount="onAddDiffCount()"
     ></MFieldsGroupListItem>
 
-    <div class="m-fields-group-list-footer">
+    <div class="m-fields-group-list-footer" v-if="!isCompare">
       <slot name="toggle-button"></slot>
       <div style="display: flex; justify-content: flex-end; flex: 1">
         <slot name="add-button"></slot>

package/src/containers/GroupListItem.vue

@@ -7,6 +7,7 @@
         </TMagicButton>
 
         <TMagicButton
+          v-if="!isCompare"
           v-show="showDelete"
           type="danger"
           size="small"
@@ -17,7 +18,7 @@
         ></TMagicButton>
 
         <TMagicButton
-          v-if="copyable"
+          v-if="copyable && !isCompare"
           link
           size="small"
           type="primary"
@@ -27,7 +28,7 @@
           >复制</TMagicButton
         >
 
-        <template v-if="movable">
+        <template v-if="movable && !isCompare">
           <TMagicButton
             v-show="index !== 0"
             link
@@ -49,7 +50,7 @@
         </template>
 
         <TMagicPopover
-          v-if="config.moveSpecifyLocation"
+          v-if="config.moveSpecifyLocation && !isCompare"
           trigger="click"
           placement="top"
           width="200"

package/src/containers/Tabs.vue

@@ -19,7 +19,10 @@
       :is="tabPaneComponent?.component || 'el-tab-pane'"
       :key="tab[mForm?.keyProp || '__key'] ?? tabIndex"
       v-bind="
-        tabPaneComponent?.props({ name: filter(tab.status) || tabIndex.toString(), lazy: tab.lazy || false }) || {}
+        tabPaneComponent?.props({
+          name: filter(tab.status) || tabIndex.toString(),
+          lazy: isCompare ? false : tab.lazy || false,
+        }) || {}
       "
     >
       <template #label>
@@ -76,7 +79,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, watchEffect } from 'vue';
+import { computed, inject, ref, watch, watchEffect } from 'vue';
 import { isEmpty } from 'lodash-es';
 
 import { getDesignConfig, TMagicBadge } from '@tmagic/design';
@@ -172,6 +175,11 @@ watchEffect(() => {
   }
 });
 
+// model 或 lastValues 变化时，重置差异数
+watch([() => props.model, () => props.lastValues], () => {
+  diffCount.value = {};
+});
+
 const tabItems = (tab: TabPaneConfig) => (props.config.dynamic ? props.config.items : tab.items);
 
 const tabClickHandler = (tab: any) => {

package/src/containers/table/Table.vue

@@ -44,7 +44,7 @@
               {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
             </TMagicButton>
             <TMagicUpload
-              v-if="importable"
+              v-if="importable && !isCompare"
               style="display: inline-block"
               ref="excelBtn"
               action="/noop"
@@ -54,11 +54,17 @@
             >
               <TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton>
             </TMagicUpload>
-            <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler"
+            <TMagicButton
+              v-if="importable && !isCompare"
+              size="small"
+              type="warning"
+              :disabled="disabled"
+              plain
+              @click="clearHandler"
               >清空</TMagicButton
             >
           </div>
-          <slot name="add-button"></slot>
+          <slot name="add-button" v-if="!isCompare"></slot>
         </div>
 
         <div class="bottom" style="text-align: right" v-if="config.pagination">