diff --git a/src/common/data-import2-select/data-import2-select.scss b/src/common/data-import2-select/data-import2-select.scss
new file mode 100644
index 0000000000000000000000000000000000000000..be33c1dbfb4b6a277866247d964b3911244ddd90
--- /dev/null
+++ b/src/common/data-import2-select/data-import2-select.scss
@@ -0,0 +1,36 @@
+@include b('data-import2-select') {
+
+    @include e('select-option') {
+        padding: getCssVar(spacing, none);
+    }
+
+    @include e('select-option-item') {
+        padding: getCssVar(spacing, none) 30px getCssVar(spacing, none) 10px;
+        @include flex(row, space-between, center);
+        height: 100%;
+
+        &:hover {
+            @include e('select-option-item-button-delete') {
+                display: block;
+            }
+        }
+    }
+
+    @include e('select-option-item-button-delete') {
+        position: absolute;
+        right: getCssVar(spacing, none);
+        display: none;
+    }
+
+    @include e('dataimport-select') {
+        margin-top: -5px;
+    }
+    
+    @include e('select-option-item-button-delete-icon') {
+        color: red;
+    }
+
+    @include e('select-option-item-input') {
+        width:100%
+    }
+}
\ No newline at end of file
diff --git a/src/common/data-import2-select/data-import2-select.tsx b/src/common/data-import2-select/data-import2-select.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f1456bf319de76476d20f07d6458d28eb666f3a0
--- /dev/null
+++ b/src/common/data-import2-select/data-import2-select.tsx
@@ -0,0 +1,209 @@
+import { PropType, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { importMapping } from '../data-import2/data-import2';
+import './data-import2-select.scss';
+
+export const DataImport2Select = defineComponent({
+  name: 'DataImport2Select',
+  props: {
+    previewinfo: {
+      type: Object as PropType<[string[]]>,
+      required: true,
+    },
+    options: {
+      type: Object as PropType<
+        {
+          value: string;
+          label: string;
+          oldLabel: string;
+          edit: boolean;
+          checkmark: boolean;
+          close: boolean;
+        }[]
+      >,
+      required: true,
+    },
+    columnMappingListMap: {
+      type: Object as PropType<Map<string, IData>>,
+      required: true,
+    },
+    listValue: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props, { emit }) {
+    const ns = useNamespace('data-import2-select');
+    // 点击input,禁止下拉框关闭
+    const inputClick = (e: Event) => {
+      e.stopPropagation();
+    };
+    // 开启导入模式编辑
+    const editLabel = (e: Event, item: IData) => {
+      e.stopPropagation();
+      emit('optionsChange', item.label, {
+        edit: false,
+        checkmark: true,
+        close: true,
+      });
+    };
+    // 保存已修改的导入模式名称
+    const saveLabel = async (e: Event, item: IData) => {
+      e.stopPropagation();
+      emit('optionsChange', item.label, {
+        edit: true,
+        checkmark: false,
+        close: false,
+        value: item.label,
+        label: item.label,
+      });
+      const data = props.columnMappingListMap.get(item.oldLabel);
+      if (data) {
+        data.name = item.label;
+        const result = await importMapping('put', data.id, data);
+        // 请求更新
+        if (result.status === 200 && result.ok) {
+          emit('columnMappingListMapChange', item.label, result.data);
+        }
+      }
+      if (props.listValue === item.oldLabel) {
+        emit('listValueChange', item.label);
+      }
+      emit('optionsChange', item.label, {
+        oldLabel: item.label,
+      });
+    };
+
+    // 不保存已修改的导入模式名称
+    const notSaveLabel = (e: Event, item: IData) => {
+      e.stopPropagation();
+      emit('optionsChange', item.label, {
+        edit: true,
+        checkmark: false,
+        close: false,
+        label: item.oldLabel,
+      });
+    };
+
+    // 删除导入模式
+    const handleDeleteOption = async (e: Event, str: string) => {
+      e.stopPropagation();
+      const columnData = props.columnMappingListMap.get(str);
+      if (columnData) {
+        const res = await importMapping('delete', columnData.id);
+
+        // 删除之后把下拉里的也删除
+        if (res.status === 200 && res.ok) {
+          emit('optionsChange', str);
+          emit('columnMappingListMapChange', str);
+          if (props.listValue === str) {
+            emit('listValueChange', '');
+          }
+        }
+      }
+    };
+    const valueChange = (data: string) => {
+      emit('listValueChange', data);
+    };
+    return {
+      ns,
+      inputClick,
+      editLabel,
+      saveLabel,
+      notSaveLabel,
+      handleDeleteOption,
+      valueChange,
+    };
+  },
+  render() {
+    return (
+      <div class='ibiz-control-toolbar__item'>
+        <el-select
+          ref='select'
+          model-value={this.listValue}
+          onChange={this.valueChange}
+          clearable
+          placeholder='选择导入模式'
+          disabled={!(this.previewinfo[0] && this.previewinfo[0].length)}
+          popper-class={this.ns.e('dataimport-select')}
+        >
+          {this.options.map(item => {
+            return (
+              <el-option
+                label={item.label}
+                value={item.value}
+                class={[this.ns.e('select-option')]}
+              >
+                {{
+                  default: () => (
+                    <div class={[this.ns.e('select-option-item')]}>
+                      {item.edit ? <span>{item.label}</span> : ''}
+                      {item.edit ? (
+                        ''
+                      ) : (
+                        <el-input
+                          model-value={item.label}
+                          onClick={(e: Event) => this.inputClick(e)}
+                          class={[this.ns.e('select-option-item-input')]}
+                          onInput={(args: string) => {
+                            item.label = args;
+                          }}
+                        ></el-input>
+                      )}
+                      {item.edit ? (
+                        <el-button
+                          text
+                          size='small'
+                          onClick={(e: Event) => this.editLabel(e, item)}
+                        >
+                          编辑
+                        </el-button>
+                      ) : (
+                        ''
+                      )}
+                      {item.checkmark ? (
+                        <el-button
+                          size='small'
+                          onClick={(e: Event) => this.saveLabel(e, item)}
+                        >
+                          <ion-icon name='checkmark-outline'></ion-icon>
+                        </el-button>
+                      ) : (
+                        ''
+                      )}
+                      {item.close ? (
+                        <el-button
+                          size='small'
+                          onClick={(e: Event) => this.notSaveLabel(e, item)}
+                        >
+                          <ion-icon name='close-outline'></ion-icon>
+                        </el-button>
+                      ) : (
+                        ''
+                      )}
+                      <el-button
+                        text
+                        size='small'
+                        onClick={(e: Event) =>
+                          this.handleDeleteOption(e, item.value)
+                        }
+                        class={this.ns.e('select-option-item-button-delete')}
+                      >
+                        <ion-icon
+                          name='trash-outline'
+                          class={this.ns.e(
+                            'select-option-item-button-delete-icon',
+                          )}
+                        ></ion-icon>
+                      </el-button>
+                    </div>
+                  ),
+                }}
+              </el-option>
+            );
+          })}
+        </el-select>
+      </div>
+    );
+  },
+});
diff --git a/src/common/data-import2-table/data-import2-table.scss b/src/common/data-import2-table/data-import2-table.scss
new file mode 100644
index 0000000000000000000000000000000000000000..568092eec6bf44b13bff99313129054f2f8efd9b
--- /dev/null
+++ b/src/common/data-import2-table/data-import2-table.scss
@@ -0,0 +1,42 @@
+@include b(data-import2-table) {
+
+    @include e('template-container') {
+        height: 100%;
+    }
+
+    @include e('empty') {
+        width: 100%;
+        height: 100%;
+        @include flex(row, center, center);
+    }
+
+    @include e('dataimport-select') {
+        margin-top: -5px;
+    }
+
+    @include e('select') {
+        width: 100%;
+    }
+
+    @include e('dataimport-table') {
+        border-spacing: getCssVar(spacing, none);
+        border-collapse: collapse;
+    }
+
+    @include e('dataimpoer2-table-select') {
+        border: 1px solid getCssVar(color, border);
+        min-width: 132px;
+    }
+
+    @include e('dataimport2-table-th') {
+        border: 1px solid getCssVar(color, border);
+        padding: getCssVar(spacing, 'extra-tight');
+        min-width: 132px;
+    }
+
+    @include e('dataimport2-table-td') {
+        border: 1px solid getCssVar(color, border);
+        padding: getCssVar(spacing, 'extra-tight');
+        min-width: 132px;
+    }
+}
\ No newline at end of file
diff --git a/src/common/data-import2-table/data-import2-table.tsx b/src/common/data-import2-table/data-import2-table.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9e034289e565e1b6ece861d26a90e507f1c671ab
--- /dev/null
+++ b/src/common/data-import2-table/data-import2-table.tsx
@@ -0,0 +1,124 @@
+import { PropType, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { IAppDEField, IDEDataImportItem } from '@ibiz/model-core';
+import './data-import2-table.scss';
+
+interface ISharedProperties {
+  logicName?: string;
+  caption?: string;
+}
+type DataOption =
+  | (IAppDEField & ISharedProperties)
+  | (IDEDataImportItem & ISharedProperties);
+
+export const DataImport2Table = defineComponent({
+  name: 'DataImport2Table',
+  props: {
+    previewinfo: {
+      type: Object as PropType<[string[]]>,
+      required: true,
+    },
+    dataOption: {
+      type: Object as PropType<DataOption[]>,
+      required: true,
+    },
+    selectValues: {
+      type: Object as PropType<string[]>,
+      required: true,
+    },
+    columnMappingSave: {
+      type: Boolean,
+      required: true,
+    },
+    columnMap: {
+      type: Object as PropType<Map<string, IData>>,
+      required: true,
+    },
+  },
+  setup(props, { emit }) {
+    const ns = useNamespace('data-import2-table');
+
+    // 绘制下拉选择
+    const renderSelect = (itemx: string, index: number) => {
+      const change = (item: string) => {
+        emit('selectValuesChange', index, item);
+        const data = props.columnMap.get(`${itemx}-${index}`);
+        if (data) {
+          data.name = item;
+        }
+        emit('columnMapChange', `${itemx}-${index}`, data);
+        emit('columnMappingSaveChange', false);
+      };
+      return (
+        <el-select
+          modelValue={props.selectValues[index]}
+          placeholder='选择当前列对应的导入属性'
+          onChange={change}
+          key={index}
+          popper-class={ns.e('dataimport-select')}
+          class={ns.e('select')}
+        >
+          {props.dataOption.map(item => {
+            return (
+              <el-option
+                key={item.name}
+                value={item.id}
+                label={item.caption ? item.caption : item.logicName}
+              ></el-option>
+            );
+          })}
+        </el-select>
+      );
+    };
+
+    // 绘制表格
+    const renderTable = () => {
+      const arr = props.previewinfo;
+      // 创建表格行
+      const rows = arr.map((row: string[], rowIndex: number) => (
+        <tr key={rowIndex}>
+          {row.map((cell, cellIndex) =>
+            rowIndex === 0 ? (
+              <th key={cellIndex} class={ns.e('dataimport2-table-th')}>
+                {cell}
+              </th>
+            ) : (
+              <td key={cellIndex} class={ns.e('dataimport2-table-td')}>
+                {cell}
+              </td>
+            ),
+          )}
+        </tr>
+      ));
+      const newRows = [
+        <tr key='newRow'>
+          {arr[0].map((item: string, index: number) => (
+            <td key={index} class={ns.e('dataimpoer2-table-select')}>
+              {renderSelect(item, index)}
+            </td>
+          ))}
+        </tr>,
+        ...rows,
+      ];
+      // 返回表格元素
+      return (
+        <table class={ns.e('dataimport-table')}>
+          <tbody>{newRows}</tbody>
+        </table>
+      );
+    };
+    const renderEmpty = () => {
+      return <div class={ns.e('empty')}>暂无数据</div>;
+    };
+    return { ns, renderEmpty, renderTable };
+  },
+  render() {
+    return (
+      <div class={[this.ns.e('template-container'), 'ibiz-panel-view-content']}>
+        {this.previewinfo[0] && this.previewinfo[0].length
+          ? this.renderTable()
+          : this.renderEmpty()}
+      </div>
+    );
+  },
+});
diff --git a/src/common/data-import2/data-import2.scss b/src/common/data-import2/data-import2.scss
index 0ed2eb76c3b6615fd7311bc4b2a5ebfbf1f32c20..1094fd24f7b6fd507888d575607919d7d9acadb2 100644
--- a/src/common/data-import2/data-import2.scss
+++ b/src/common/data-import2/data-import2.scss
@@ -13,70 +13,8 @@
     @include flex(row, space-between, center);
   }
 
-  @include e('template-container') {
-    height: 100%;
-  }
-
-  @include e('empty') {
-    width: 100%;
-    height: 100%;
-    @include flex(row, center, center);
-  }
-
-  @include e('dataimport-select') {
-    margin-top: -5px;
-  }
-
-  @include e('select') {
-    width: 100%;
-  }
-
-  @include e('dataimport-table') {
-    border-spacing: getCssVar(spacing, none);
-    border-collapse: collapse;
-  }
-
-  @include e('dataimpoer2-table-select') {
-    border: 1px solid getCssVar(color, border);
-    min-width: 132px;
-  }
-
-  @include e('dataimport2-table-th') {
-    border: 1px solid getCssVar(color, border);
-    padding: getCssVar(spacing, 'extra-tight');
-    min-width: 132px;
-  }
-
-  @include e('dataimport2-table-td') {
-    border: 1px solid getCssVar(color, border);
-    padding: getCssVar(spacing, 'extra-tight');
-    min-width: 132px;
-  }
-
-  @include e('select-option') {
-    padding: getCssVar(spacing, none);
-  }
-
-  @include e('select-option-item') {
-    padding: getCssVar(spacing, none) 30px getCssVar(spacing, none) 10px;
-    @include flex(row, space-between, center);
-    height: 100%;
-
-    &:hover {
-      @include e('select-option-item-button-delete') {
-        display: block;
-      }
-    }
-  }
-
   @include e('select-option-item-button') {
     height: 100%;
   }
 
-  @include e('select-option-item-button-delete') {
-    position: absolute;
-    color: getCssVarName(red, 0);
-    right: getCssVar(spacing, none);
-    display: none;
-  }
 }
\ No newline at end of file
diff --git a/src/common/data-import2/data-import2.tsx b/src/common/data-import2/data-import2.tsx
index e1271d06f0cea2b364961fa4c02b9c0d743e1ab2..a00f0b1b85c3b609546dac7a529651df56fcea09 100644
--- a/src/common/data-import2/data-import2.tsx
+++ b/src/common/data-import2/data-import2.tsx
@@ -29,7 +29,11 @@ type DataOption =
   | (IAppDEField & ISharedProperties)
   | (IDEDataImportItem & ISharedProperties);
 
-async function importMapping(
+type Options = {
+  [key: string]: string | boolean;
+};
+
+export async function importMapping(
   method: string,
   id?: string,
   data?: IData,
@@ -80,7 +84,7 @@ export const DataImport2 = defineComponent({
     const selectValues: Ref<string[]> = ref([]);
 
     // 表格中下拉的属性
-    let dataOption: DataOption[] = [];
+    const dataOption: Ref<DataOption[]> = ref([]);
 
     // 定制导入组件
     const dataimport2 = ref();
@@ -104,16 +108,7 @@ export const DataImport2 = defineComponent({
     const columnMappingListMap = new Map();
 
     // // 导入模式下拉选择器选项集合
-    const options: Ref<
-      {
-        value: string;
-        label: string;
-        oldLabel: string;
-        edit: boolean;
-        checkmark: boolean;
-        close: boolean;
-      }[]
-    > = ref([]);
+    const options: Ref<Options[]> = ref([]);
 
     // 是否是私人导入模式
     const isNoPersonel = ref(false);
@@ -169,10 +164,15 @@ export const DataImport2 = defineComponent({
           );
           const newColumnValue = filteredObjects[index];
           if (newColumnValue) {
-            captionMap.set(itemName, index + 1);
-            newColumnValue.index = columnMapValue.index;
-            columnMap.set(item, newColumnValue);
-            selectValues.value[newColumnValue.index] = newColumnValue.name;
+            const dataOptionValue = dataOption.value.find(
+              dataOptionItem => dataOptionItem.id === newColumnValue.name,
+            );
+            if (dataOptionValue) {
+              captionMap.set(itemName, index + 1);
+              newColumnValue.index = columnMapValue.index;
+              columnMap.set(item, newColumnValue);
+              selectValues.value[newColumnValue.index] = newColumnValue.name;
+            }
           }
         });
       } else {
@@ -307,82 +307,14 @@ export const DataImport2 = defineComponent({
           importItem.id === props.appDataEntity.defaultAppDEDataImportId,
       );
       if (dataImport && dataImport.dedataImportItems) {
-        dataOption = dataImport.dedataImportItems;
+        dataOption.value = dataImport.dedataImportItems;
       } else if (props.appDataEntity.appDEFields) {
-        dataOption = props.appDataEntity.appDEFields;
+        dataOption.value = props.appDataEntity.appDEFields;
       }
       findDialog(dataimport2.value.parentElement);
       columnMappingListQuery();
     });
 
-    // 绘制下拉选择
-    const renderSelect = (itemx: string, index: number) => {
-      const change = (item: string) => {
-        selectValues.value[index] = item;
-        const data = columnMap.get(`${itemx}-${index}`);
-        data.name = item;
-        columnMap.set(`${itemx}-${index}`, data);
-        ColumnMappingSave.value = false;
-      };
-      return (
-        <el-select
-          modelValue={selectValues.value[index]}
-          placeholder='选择当前列对应的导入属性'
-          onChange={change}
-          key={index}
-          popper-class={ns.e('dataimport-select')}
-          class={ns.e('select')}
-        >
-          {dataOption.map(item => {
-            return (
-              <el-option
-                key={item.name}
-                value={item.id}
-                label={item.caption ? item.caption : item.logicName}
-              ></el-option>
-            );
-          })}
-        </el-select>
-      );
-    };
-
-    // 绘制表格
-    const renderTable = () => {
-      const arr = previewinfo.value;
-      // 创建表格行
-      const rows = arr.map((row: string[], rowIndex: number) => (
-        <tr key={rowIndex}>
-          {row.map((cell, cellIndex) =>
-            rowIndex === 0 ? (
-              <th key={cellIndex} class={ns.e('dataimport2-table-th')}>
-                {cell}
-              </th>
-            ) : (
-              <td key={cellIndex} class={ns.e('dataimport2-table-td')}>
-                {cell}
-              </td>
-            ),
-          )}
-        </tr>
-      ));
-      const newRows = [
-        <tr key='newRow'>
-          {arr[0].map((item: string, index: number) => (
-            <td key={index} class={ns.e('dataimpoer2-table-select')}>
-              {renderSelect(item, index)}
-            </td>
-          ))}
-        </tr>,
-        ...rows,
-      ];
-      // 返回表格元素
-      return (
-        <table class={ns.e('dataimport-table')}>
-          <tbody>{newRows}</tbody>
-        </table>
-      );
-    };
-
     // 请求头
     const headers: Ref<IData> = ref({
       Authorization: `Bearer ${getCookie(CoreConst.TOKEN)}`,
@@ -446,70 +378,43 @@ export const DataImport2 = defineComponent({
       watchValue(listValue.value);
     };
 
-    const renderEmpty = () => {
-      return <div class={ns.e('empty')}>暂无数据</div>;
+    const columnMappingSaveChange = (data: boolean) => {
+      ColumnMappingSave.value = data;
     };
 
-    // 删除导入模式
-    const handleDeleteOption = async (e: Event, str: string) => {
-      e.stopPropagation();
-      const columnData = columnMappingListMap.get(str);
-      const res = await importMapping('delete', columnData.id);
-      // 删除之后把下拉里的也删除
-      if (res.status === 200 && res.ok) {
-        const index = options.value.findIndex(obj => obj.label === str);
-        if (index !== -1) {
-          options.value.splice(index, 1);
-        }
-        columnMappingListMap.delete(str);
-        if (listValue.value === str) {
-          listValue.value = '';
-        }
-      }
+    const selectValuesChange = (index: number, item: string) => {
+      selectValues.value[index] = item;
     };
 
-    // 开启导入模式编辑
-    const editLabel = (e: Event, item: IData) => {
-      e.stopPropagation();
-      item.edit = false;
-      item.checkmark = true;
-      item.close = true;
+    const columnMapChange = (key: string, data: IData) => {
+      columnMap.set(key, data);
     };
 
-    // 点击input,禁止下拉框关闭
-    const inputClick = (e: Event) => {
-      e.stopPropagation();
+    const listValueChange = (data: string) => {
+      listValue.value = data;
     };
 
-    // 保存已修改的导入模式名称
-    const saveLabel = async (e: Event, item: IData) => {
-      e.stopPropagation();
-      item.edit = true;
-      item.checkmark = false;
-      item.close = false;
-      // 更新下拉列表
-      item.value = item.label;
-      const data = columnMappingListMap.get(item.oldLabel);
-      data.name = item.label;
-      // 请求更新
-      const result = await importMapping('put', data.id, data);
-      if (result.status === 200 && result.ok) {
-        columnMappingListMap.set(item.label, result.data);
-      }
-      if (listValue.value === item.oldLabel) {
-        listValue.value = item.label;
+    const columnMappingListMapChange = (key: string, data?: IData) => {
+      if (data) {
+        columnMappingListMap.set(key, data);
+      } else {
+        columnMappingListMap.delete(key);
       }
-      item.oldLabel = item.label;
     };
 
-    // 不保存已修改的导入模式名称
-    const notSaveLabel = (e: Event, item: IData) => {
-      e.stopPropagation();
-      item.edit = true;
-      item.checkmark = false;
-      item.close = false;
-      // 还原label的修改
-      item.label = item.oldLabel;
+    const optionsChange = (str: string, data?: Options) => {
+      if (data) {
+        const index = options.value.findIndex(obj => obj.label === str);
+        const optionValue = options.value[index];
+        Object.keys(data).forEach((key: string) => {
+          optionValue[key] = data[key];
+        });
+      } else {
+        const index = options.value.findIndex(obj => obj.label === str);
+        if (index !== -1) {
+          options.value.splice(index, 1);
+        }
+      }
     };
     return {
       ns,
@@ -520,23 +425,25 @@ export const DataImport2 = defineComponent({
       UploadUrl,
       headers,
       onSuccess,
-      renderTable,
-      renderSelect,
       previewinfo,
       selectValues,
-      renderEmpty,
       beforeUpload,
       dataimport2,
       listValue,
       options,
-      handleDeleteOption,
       select,
       isNoPersonel,
       fileName,
-      editLabel,
-      inputClick,
-      saveLabel,
-      notSaveLabel,
+      dataOption,
+      ColumnMappingSave,
+      columnMap,
+      columnMappingSaveChange,
+      selectValuesChange,
+      columnMapChange,
+      columnMappingListMap,
+      listValueChange,
+      columnMappingListMapChange,
+      optionsChange,
     };
   },
   render() {
@@ -568,100 +475,17 @@ export const DataImport2 = defineComponent({
                   {this.fileName ? `当前文件名:${this.fileName}` : ''}
                 </div>
                 {this.previewinfo[0] && this.previewinfo[0].length ? (
-                  <div class='ibiz-control-toolbar__item'>
-                    <el-select
-                      ref='select'
-                      v-model={this.listValue}
-                      clearable
-                      placeholder='选择导入模式'
-                      disabled={
-                        !(this.previewinfo[0] && this.previewinfo[0].length)
-                      }
-                      popper-class={this.ns.e('dataimport-select')}
-                    >
-                      {this.options.map(item => {
-                        return (
-                          <el-option
-                            label={item.label}
-                            value={item.value}
-                            class={[this.ns.e('select-option')]}
-                          >
-                            {{
-                              default: () => (
-                                <div class={[this.ns.e('select-option-item')]}>
-                                  {item.edit ? <span>{item.label}</span> : ''}
-                                  {item.edit ? (
-                                    ''
-                                  ) : (
-                                    <el-input
-                                      model-value={item.label}
-                                      onClick={(e: Event) => this.inputClick(e)}
-                                      style={'width:100%'}
-                                      onInput={(args: string) => {
-                                        item.label = args;
-                                      }}
-                                    ></el-input>
-                                  )}
-                                  {item.edit ? (
-                                    <el-button
-                                      text
-                                      size='small'
-                                      onClick={(e: Event) =>
-                                        this.editLabel(e, item)
-                                      }
-                                    >
-                                      编辑
-                                    </el-button>
-                                  ) : (
-                                    ''
-                                  )}
-                                  {item.checkmark ? (
-                                    <el-button
-                                      size='small'
-                                      onClick={(e: Event) =>
-                                        this.saveLabel(e, item)
-                                      }
-                                    >
-                                      <ion-icon name='checkmark-outline'></ion-icon>
-                                    </el-button>
-                                  ) : (
-                                    ''
-                                  )}
-                                  {item.close ? (
-                                    <el-button
-                                      size='small'
-                                      onClick={(e: Event) =>
-                                        this.notSaveLabel(e, item)
-                                      }
-                                    >
-                                      <ion-icon name='close-outline'></ion-icon>
-                                    </el-button>
-                                  ) : (
-                                    ''
-                                  )}
-                                  <el-button
-                                    text
-                                    size='small'
-                                    onClick={(e: Event) =>
-                                      this.handleDeleteOption(e, item.value)
-                                    }
-                                    class={this.ns.e(
-                                      'select-option-item-button-delete',
-                                    )}
-                                  >
-                                    <ion-icon
-                                      name='trash-outline'
-                                      style={'color:red'}
-                                    ></ion-icon>
-                                  </el-button>
-                                </div>
-                              ),
-                            }}
-                          </el-option>
-                        );
-                      })}
-                    </el-select>
-                  </div>
+                  <data-import2-select
+                    previewinfo={this.previewinfo}
+                    options={this.options}
+                    columnMappingListMap={this.columnMappingListMap}
+                    listValue={this.listValue}
+                    onListValueChange={this.listValueChange}
+                    onColumnMappingListMapChange={
+                      this.columnMappingListMapChange
+                    }
+                    onOptionsChange={this.optionsChange}
+                  ></data-import2-select>
                 ) : (
                   ''
                 )}
@@ -687,7 +511,7 @@ export const DataImport2 = defineComponent({
                 >
                   <el-button>
                     {this.previewinfo[0] && this.previewinfo[0].length
-                      ? '重新文件上传'
+                      ? '重新上传文件'
                       : '文件上传'}
                   </el-button>
                 </el-upload>
@@ -704,13 +528,16 @@ export const DataImport2 = defineComponent({
             </div>
           </div>
         </div>
-        <div
-          class={[this.ns.e('template-container'), 'ibiz-panel-view-content']}
-        >
-          {this.previewinfo[0] && this.previewinfo[0].length
-            ? this.renderTable()
-            : this.renderEmpty()}
-        </div>
+        <data-import2-table
+          previewinfo={this.previewinfo}
+          selectValues={this.selectValues}
+          dataOption={this.dataOption}
+          columnMappingSave={this.ColumnMappingSave}
+          columnMap={this.columnMap}
+          onSelectValuesChange={this.selectValuesChange}
+          onColumnMappingSaveChange={this.columnMappingSaveChange}
+          onColumnMapChange={this.columnMapChange}
+        ></data-import2-table>
       </div>
     );
   },
diff --git a/src/common/index.ts b/src/common/index.ts
index be15fde9e90305f7e27203bce469e2f4ca5d0c8e..1830d4e8cb7c29dc987725c8acd826db456a6c83 100644
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -20,6 +20,8 @@ import { IBizPagination } from './pagination/pagination';
 import { IBizSortBar } from './sort-bar/sort-bar';
 import { DataImport } from './data-import/data-import';
 import { DataImport2 } from './data-import2/data-import2';
+import { DataImport2Table } from './data-import2-table/data-import2-table';
+import { DataImport2Select } from './data-import2-select/data-import2-select';
 
 export * from './col/col';
 export * from './row/row';
@@ -51,6 +53,8 @@ export const IBizCommonComponents = {
     v.component(IBizSortBar.name, IBizSortBar);
     v.component(DataImport.name, DataImport);
     v.component(DataImport2.name, DataImport2);
+    v.component(DataImport2Table.name, DataImport2Table);
+    v.component(DataImport2Select.name, DataImport2Select);
     v.component(
       'IBizMapChart',
       defineAsyncComponent({