diff --git a/frontend/src/views/dataset/add/AddApi.vue b/frontend/src/views/dataset/add/AddApi.vue
index 93cf36473b..9c3c4e9ba9 100644
--- a/frontend/src/views/dataset/add/AddApi.vue
+++ b/frontend/src/views/dataset/add/AddApi.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="dataset-api">
-    <p v-if="!showLeft" @click="showLeft = true" class="arrow-right">
-      <i class="el-icon-d-arrow-right"></i>
+    <p v-if="!showLeft" class="arrow-right" @click="showLeft = true">
+      <i class="el-icon-d-arrow-right" />
     </p>
-    <div class="table-list" v-else>
+    <div v-else class="table-list">
       <p class="select-ds">
         {{ $t('deDataset.select_data_source') }}
-        <i @click="showLeft = false" class="el-icon-d-arrow-left"></i>
+        <i class="el-icon-d-arrow-left" @click="showLeft = false" />
       </p>
       <el-select
-        class="ds-list"
         v-model="dataSource"
+        class="ds-list"
         filterable
         :placeholder="$t('dataset.pls_slc_data_source')"
         size="small"
@@ -35,10 +35,10 @@
         <!-- <div class="item" v-for="(ele, index) in tableData"> -->
         <el-checkbox-group v-model="checkTableList" size="small">
           <el-tooltip
-            :disabled="t.enableCheck"
-            effect="dark"
             v-for="t in tableData"
             :key="t.name"
+            :disabled="t.enableCheck"
+            effect="dark"
             :content="$t('dataset.table_already_add_to') + ': ' + t.datasetPath"
             placement="right"
           >
@@ -49,10 +49,9 @@
               class="item"
               @click="setActiveName(t)"
             >
-              <el-checkbox :label="t.name" :disabled="!t.enableCheck">
-              </el-checkbox>
+              <el-checkbox :label="t.name" :disabled="!t.enableCheck" />
               <span class="label">{{ showTableNameWithComment(t) }}</span>
-              <span class="error-name-exsit" v-if="t.nameExsit">
+              <span v-if="t.nameExsit" class="error-name-exsit">
                 <svg-icon icon-class="exclamationmark" class="ds-icon-scene" />
               </span>
             </div>
@@ -86,21 +85,21 @@
         </el-select>
       </div>
       <el-empty
+        v-if="!dataSource"
         style="padding-top: 160px"
         size="125"
-        v-if="!dataSource"
         :description="$t('dataset.pls_slc_data_source')"
         :image="noSelectTable"
-      ></el-empty>
+      />
       <template v-else-if="activeName">
         <div class="dataset">
           <span class="name">{{ $t('dataset.name') }}</span>
           <el-input
-            @change="validateName"
             v-if="activeIndex !== -1"
             v-model="tableData[activeIndex].datasetName"
             size="small"
             clearable
+            @change="validateName"
           />
           <div
             v-if="tableData[activeIndex].nameExsit"
@@ -110,7 +109,7 @@
             {{ $t('deDataset.already_exists') }}
           </div>
         </div>
-        <div class="data" v-loading="tableLoading">
+        <div v-loading="tableLoading" class="data">
           <span class="result-num">{{
             `${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')}`
           }}</span>
@@ -136,26 +135,26 @@
         </div>
       </template>
       <el-empty
+        v-else-if="avilibelTable"
         style="padding-top: 160px"
         size="125"
-        v-else-if="avilibelTable"
         :description="$t('deDataset.is_currently_available')"
         :image="noAvilibelTableImg"
-      ></el-empty>
+      />
       <el-empty
+        v-else-if="!activeName"
         style="padding-top: 160px"
         size="125"
-        v-else-if="!activeName"
         :description="$t('deDataset.left_to_edit')"
         :image="noSelectTable"
-      ></el-empty>
+      />
     </div>
   </div>
 </template>
 
 <script>
 import { listApiDatasource, post, isKettleRunning } from '@/api/dataset/dataset'
-import {dbPreview, engineMode} from '@/api/system/engine'
+import { dbPreview, engineMode } from '@/api/system/engine'
 
 export default {
   name: 'AddApi',
@@ -282,7 +281,7 @@ export default {
     },
     calHeight() {
       const that = this
-      setTimeout(function () {
+      setTimeout(function() {
         const currentHeight = document.documentElement.clientHeight
         that.height = currentHeight - 195 - 54
       }, 10)
@@ -336,7 +335,7 @@ export default {
       const tables = []
       const mode = this.mode
       const syncType = this.syncType
-      this.checkTableList.forEach(function (name) {
+      this.checkTableList.forEach(function(name) {
         const datasetName = this.tableData.find(
           (ele) => ele.name === name
         ).datasetName
diff --git a/frontend/src/views/dataset/add/AddExcel.vue b/frontend/src/views/dataset/add/AddExcel.vue
index 8793376f91..0326710de0 100644
--- a/frontend/src/views/dataset/add/AddExcel.vue
+++ b/frontend/src/views/dataset/add/AddExcel.vue
@@ -1,21 +1,19 @@
 <template>
   <div class="dataset-excel">
-    <p v-if="!showLeft" @click="showLeft = true" class="arrow-right">
-      <i class="el-icon-d-arrow-right"></i>
+    <p v-if="!showLeft" class="arrow-right" @click="showLeft = true">
+      <i class="el-icon-d-arrow-right" />
     </p>
-    <div class="table-list" v-else>
+    <div v-else class="table-list">
       <p class="select-ds">
-        <span
-          >{{ $t('deDataset.select_data_table ') }}
+        <span>{{ $t('deDataset.select_data_table ') }}
           <el-tooltip class="item" effect="dark" placement="right">
             <div slot="content">
-              {{ $t('dataset.excel_info_1') }}<br />
-              {{ $t('dataset.excel_info_2') }}<br />
+              {{ $t('dataset.excel_info_1') }}<br>
+              {{ $t('dataset.excel_info_2') }}<br>
               {{ $t('dataset.excel_info_3') }}
             </div>
-            <i class="el-icon-warning-outline"></i> </el-tooltip
-        ></span>
-        <i @click="showLeft = false" class="el-icon-d-arrow-left"></i>
+            <i class="el-icon-warning-outline" /> </el-tooltip></span>
+        <i class="el-icon-d-arrow-left" @click="showLeft = false" />
       </p>
       <el-upload
         :action="baseUrl + 'dataset/table/excel/upload'"
@@ -23,7 +21,7 @@
         :show-file-list="false"
         :file-list="fileList"
         :data="param"
-        accept=".xls,.xlsx,csv"
+        accept=".xls,.xlsx,.csv"
         :before-upload="beforeUpload"
         :on-success="uploadSuccess"
         :on-error="uploadFail"
@@ -36,7 +34,7 @@
           :loading="uploading"
           secondary
           :disabled="uploading"
-          >{{ $t('deDataset.upload_data') }}
+        >{{ $t('deDataset.upload_data') }}
         </deBtn>
       </el-upload>
       <div class="table-checkbox-list">
@@ -57,12 +55,12 @@
     </div>
     <div class="table-detail">
       <el-empty
+        v-if="!excelData.length"
         style="padding-top: 172px"
         :image-size="125"
-        v-if="!excelData.length"
         :image="errImg"
         :description="$t('deDataset.excel_data_first')"
-      ></el-empty>
+      />
       <template v-else>
         <div class="dataset">
           <span class="name">{{ $t('dataset.name') }}</span>
@@ -105,57 +103,57 @@
                     <svg-icon
                       v-if="field.fieldType === 'TEXT'"
                       icon-class="field_text"
-                      class="field-icon-text" />
+                      class="field-icon-text"
+                    />
                     <svg-icon
                       v-if="field.fieldType === 'DATETIME'"
                       icon-class="field_time"
-                      class="field-icon-time" />
+                      class="field-icon-time"
+                    />
                     <svg-icon
                       v-if="
                         field.fieldType === 'LONG' ||
-                        field.fieldType === 'DOUBLE'
+                          field.fieldType === 'DOUBLE'
                       "
                       icon-class="field_value"
-                      class="field-icon-value" />
-                    <i class="el-icon-arrow-down el-icon--right"></i
-                  ></span>
+                      class="field-icon-value"
+                    />
+                    <i class="el-icon-arrow-down el-icon--right" /></span>
                   <el-dropdown-menu
+                    slot="dropdown"
                     style="width: 178px"
                     class="de-card-dropdown"
-                    slot="dropdown"
                   >
                     <el-dropdown-item
                       v-for="item in fieldOptions"
                       :key="item.value"
                       :command="item.value"
-                      ><span>
-                        <svg-icon
-                          v-if="item.value === 'TEXT'"
-                          icon-class="field_text"
-                          class="field-icon-text"
-                        />
-                        <svg-icon
-                          v-if="item.value === 'DATETIME'"
-                          icon-class="field_time"
-                          class="field-icon-time"
-                        />
-                        <svg-icon
-                          v-if="
-                            item.value === 'LONG' || item.value === 'DOUBLE'
-                          "
-                          icon-class="field_value"
-                          class="field-icon-value"
-                        />
-                      </span>
+                    ><span>
+                       <svg-icon
+                         v-if="item.value === 'TEXT'"
+                         icon-class="field_text"
+                         class="field-icon-text"
+                       />
+                       <svg-icon
+                         v-if="item.value === 'DATETIME'"
+                         icon-class="field_time"
+                         class="field-icon-time"
+                       />
+                       <svg-icon
+                         v-if="
+                           item.value === 'LONG' || item.value === 'DOUBLE'
+                         "
+                         icon-class="field_value"
+                         class="field-icon-value"
+                       />
+                     </span>
                       <span
                         style="
                           color: #8492a6;
                           font-size: 14px;
                           margin-left: 10px;
                         "
-                        >{{ item.label }}</span
-                      ></el-dropdown-item
-                    >
+                      >{{ item.label }}</span></el-dropdown-item>
                   </el-dropdown-menu>
                 </el-dropdown>
                 <span style="font-size: 14px; margin-left: 10px">
@@ -170,7 +168,6 @@
   </div>
 </template>
 
-
 <script>
 import { post } from '@/api/dataset/dataset'
 import { getToken } from '@/utils/auth'
@@ -297,7 +294,7 @@ export default {
     },
     calHeight() {
       const that = this
-      setTimeout(function () {
+      setTimeout(function() {
         const currentHeight = document.documentElement.clientHeight
         that.height = currentHeight - 56 - 30 - 26 - 25 - 35 - 10 - 37 - 20 - 10
       }, 10)
@@ -424,7 +421,6 @@ export default {
       }
 
       if (this.param.editType === 0 && this.param.tableId && (effectExtField || changeFiled)) {
-
         var msg = effectExtField ? i18n.t('dataset.effect_ext_field') + ', ' + i18n.t('dataset.excel_replace_msg') : i18n.t('dataset.excel_replace_msg')
         $confirm(msg, () => {
           this.saveExcelData(sheetFileMd5, table)