diff --git a/backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java b/backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java
index aca169acb0..8c36e7f45b 100644
--- a/backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java
+++ b/backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java
@@ -23,6 +23,7 @@ import org.springframework.web.bind.annotation.*;
 import org.springframework.web.multipart.MultipartFile;
 
 import javax.annotation.Resource;
+import java.util.Collections;
 import java.util.List;
 import java.util.Map;
 
@@ -44,8 +45,8 @@ public class DataSetTableController {
     }, logical = Logical.AND)
     @ApiOperation("批量保存")
     @PostMapping("batchAdd")
-    public void batchAdd(@RequestBody List<DataSetTableRequest> datasetTable) throws Exception {
-        dataSetTableService.batchInsert(datasetTable);
+    public List<DatasetTable> batchAdd(@RequestBody List<DataSetTableRequest> datasetTable) throws Exception {
+        return dataSetTableService.batchInsert(datasetTable);
     }
 
     @DePermissions(value = {
@@ -55,11 +56,11 @@ public class DataSetTableController {
     }, logical = Logical.AND)
     @ApiOperation("更新")
     @PostMapping("update")
-    public void save(@RequestBody DataSetTableRequest datasetTable) throws Exception {
+    public List<DatasetTable> save(@RequestBody DataSetTableRequest datasetTable) throws Exception {
         if (datasetTable.getType().equalsIgnoreCase("excel")) {
-            dataSetTableService.saveExcel(datasetTable);
+            return dataSetTableService.saveExcel(datasetTable);
         } else {
-            dataSetTableService.save(datasetTable);
+            return Collections.singletonList(dataSetTableService.save(datasetTable));
         }
     }
 
diff --git a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
index 7835eada20..d97a57efdf 100644
--- a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
+++ b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
@@ -145,16 +145,18 @@ public class DataSetTableService {
     private static Logger logger = LoggerFactory.getLogger(ClassloaderResponsity.class);
 
     @DeCleaner(value = DePermissionType.DATASET, key = "sceneId")
-    public void batchInsert(List<DataSetTableRequest> datasetTable) throws Exception {
+    public List<DatasetTable> batchInsert(List<DataSetTableRequest> datasetTable) throws Exception {
         // 保存之前校验table名称
         checkNames(datasetTable);
+        List<DatasetTable> list = new ArrayList<>();
         for (DataSetTableRequest table : datasetTable) {
-            save(table);
+            list.add(save(table));
             // 清理权限缓存
             CacheUtils.removeAll(AuthConstants.USER_DATASET_NAME);
             CacheUtils.removeAll(AuthConstants.ROLE_DATASET_NAME);
             CacheUtils.removeAll(AuthConstants.DEPT_DATASET_NAME);
         }
+        return list;
     }
 
     private void extractData(DataSetTableRequest datasetTable) throws Exception {
@@ -176,10 +178,11 @@ public class DataSetTableService {
 
     @Transactional(propagation = Propagation.NOT_SUPPORTED)
     @DeCleaner(value = DePermissionType.DATASET, key = "sceneId")
-    public void saveExcel(DataSetTableRequest datasetTable) throws Exception {
+    public List<DatasetTable> saveExcel(DataSetTableRequest datasetTable) throws Exception {
         List<String> datasetIdList = new ArrayList<>();
 
         if (StringUtils.isEmpty(datasetTable.getId())) {
+            List<DatasetTable> list = new ArrayList<>();
             if (datasetTable.isMergeSheet()) {
                 Map<String, List<ExcelSheetData>> map = datasetTable.getSheets().stream()
                         .collect(Collectors.groupingBy(ExcelSheetData::getFieldsMd5));
@@ -208,6 +211,7 @@ public class DataSetTableService {
                     sysAuthService.copyAuth(sheetTable.getId(), SysAuthConstants.AUTH_SOURCE_TYPE_DATASET);
                     saveExcelTableField(sheetTable.getId(), excelSheetDataList.get(0).getFields(), true);
                     datasetIdList.add(sheetTable.getId());
+                    list.add(sheetTable);
                     DeLogUtils.save(SysLogConstants.OPERATE_TYPE.CREATE, SysLogConstants.SOURCE_TYPE.DATASET, datasetTable.getId(), datasetTable.getSceneId(), null, null);
                 }
                 datasetIdList.forEach(datasetId -> {
@@ -239,16 +243,16 @@ public class DataSetTableService {
                     sysAuthService.copyAuth(sheetTable.getId(), SysAuthConstants.AUTH_SOURCE_TYPE_DATASET);
                     saveExcelTableField(sheetTable.getId(), sheet.getFields(), true);
                     datasetIdList.add(sheetTable.getId());
+                    list.add(sheetTable);
                     DeLogUtils.save(SysLogConstants.OPERATE_TYPE.MODIFY, SysLogConstants.SOURCE_TYPE.DATASET, datasetTable.getId(), datasetTable.getSceneId(), null, null);
                 }
                 datasetIdList.forEach(datasetId -> {
                     commonThreadPool.addTask(() -> extractDataService.extractExcelData(datasetId, "all_scope", "初始导入",
                             null, datasetIdList));
                 });
-
-
             }
-            return;
+
+            return list;
         }
 
         List<ExcelSheetData> excelSheetDataList = new ArrayList<>();
@@ -287,6 +291,7 @@ public class DataSetTableService {
                     null, Arrays.asList(datasetTable.getId())));
         }
         DeLogUtils.save(SysLogConstants.OPERATE_TYPE.MODIFY, SysLogConstants.SOURCE_TYPE.DATASET, datasetTable.getId(), datasetTable.getSceneId(), null, null);
+        return Collections.singletonList(datasetTable);
     }
 
     @DeCleaner(value = DePermissionType.DATASET, key = "sceneId")
diff --git a/backend/src/main/java/io/dataease/service/panel/PanelAppTemplateService.java b/backend/src/main/java/io/dataease/service/panel/PanelAppTemplateService.java
index 88799a76a6..bc06e7a6e8 100644
--- a/backend/src/main/java/io/dataease/service/panel/PanelAppTemplateService.java
+++ b/backend/src/main/java/io/dataease/service/panel/PanelAppTemplateService.java
@@ -168,6 +168,7 @@ public class PanelAppTemplateService {
             DataSetTableRequest datasetRequest = new DataSetTableRequest();
             BeanUtils.copyBean(datasetRequest, datasetTable);
             datasetRequest.setOptFrom("appApply");
+            datasetRequest.setSyncType("sync_now");
             DatasetTable newDataset = dataSetTableService.save(datasetRequest);
             datasetsRelaMap.put(oldId, newDataset.getId());
         }
diff --git a/frontend/src/components/gridTable/index.vue b/frontend/src/components/gridTable/index.vue
index ab75046091..178f927aa7 100644
--- a/frontend/src/components/gridTable/index.vue
+++ b/frontend/src/components/gridTable/index.vue
@@ -25,7 +25,6 @@
 </template>
 
 <script>
-import { log } from '@antv/g2plot/lib/utils';
 import tableBody from "./tableBody";
 export default {
   components: { tableBody },
@@ -112,6 +111,9 @@ export default {
     },
   },
   methods: {
+    toggleRowSelection(row) {
+      this.$refs.table.toggleRowSelection(row, true);
+    },
     handlerSelected(multipleSelection) {
       this.multipleSelectionCach = [
         ...this.multipleSelectionCach,
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index a46b9dd1be..0ab2dadd39 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -445,7 +445,7 @@ export default {
     cost: 'cost',
     developer: 'developer',
     edition: 'edition',
-    installation_time: 'Installation time:'
+    installation_time: 'Install time'
   },
   table: {
     dynamicTips1: 'Fixed header, sorted by header order',
@@ -910,6 +910,11 @@ export default {
     password_input_error: 'Original password input error'
   },
   chart: {
+    margin_model: 'Model',
+    margin_model_auto: 'Auto',
+    margin_model_absolute: 'Absolute',
+    margin_model_relative: 'Relative',
+    margin_placeholder: 'Please enter a number from 0-100',
     rich_text_view_result_tips: 'The rich text view selects only the first result',
     rich_text_view: 'Rich Text View',
     view_reset: 'View Reset',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 5df944cb3b..9eaefd1367 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -910,6 +910,11 @@ export default {
     password_input_error: '原始密碼輸入錯誤'
   },
   chart: {
+    margin_model: '模式',
+    margin_model_auto: '自動',
+    margin_model_absolute: '絕對',
+    margin_model_relative: '相對',
+    margin_placeholder: '請輸入0-100數字',
     rich_text_view_result_tips: '富文本只选取第一条结果',
     rich_text_view: '富文本视图',
     view_reset: '視圖重置',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 5a2bf46a75..0cf66591bf 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -909,6 +909,11 @@ export default {
     password_input_error: '原始密码输入错误'
   },
   chart: {
+    margin_model: '模式',
+    margin_model_auto: '自动',
+    margin_model_absolute: '绝对',
+    margin_model_relative: '相对',
+    margin_placeholder: '请输入0-100数字',
     rich_text_view_result_tips: '富文本只选取第一条结果',
     rich_text_view: '富文本视图',
     view_reset: '视图重置',
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 730a435bd9..00ec60e2c7 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -1389,6 +1389,14 @@ div:focus {
     width: 2px;
     background: #3370ff;
   }
+
+  .explain {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+    margin-left: 8px;
+    color: var(--deTextSecondary, #646a73);
+  }
 }
 
 .de-foot {
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 43548d3e71..5849768991 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -217,6 +217,15 @@ export const DEFAULT_LEGEND_STYLE = {
     fontSize: '12'
   }
 }
+
+export const DEFAULT_MARGIN_STYLE = {
+  marginModel: 'auto',
+  marginTop: 40,
+  marginBottom: 44,
+  marginLeft: 15,
+  marginRight: 10
+}
+
 export const DEFAULT_XAXIS_STYLE = {
   show: true,
   position: 'bottom',
diff --git a/frontend/src/views/chart/chart/common/common.js b/frontend/src/views/chart/chart/common/common.js
index 38a601ce2a..321c238bc0 100644
--- a/frontend/src/views/chart/chart/common/common.js
+++ b/frontend/src/views/chart/chart/common/common.js
@@ -186,11 +186,38 @@ export function componentStyle(chart_option, chart) {
       chart_option.radar.splitLine = customStyle.split.splitLine
       chart_option.radar.splitArea = customStyle.split.splitArea
     }
+    if (customStyle.margin && customStyle.margin.marginModel && customStyle.margin.marginModel !== 'auto') {
+      const unit = getMarginUnit(customStyle.margin)
+      const result = { containLabel: true }
+      const realUnit = (unit === '%' ? unit : '')
+      if (customStyle.margin.marginTop != null) {
+        result.top = customStyle.margin.marginTop + realUnit
+      }
+      if (customStyle.margin.marginBottom != null) {
+        result.bottom = customStyle.margin.marginBottom + realUnit
+      }
+      if (customStyle.margin.marginLeft != null) {
+        result.left = customStyle.margin.marginLeft + realUnit
+      }
+      if (customStyle.margin.marginRight != null) {
+        result.right = customStyle.margin.marginRight + realUnit
+      }
+      if (!chart_option.grid) {
+        chart_option.grid = {}
+      }
+      Object.assign(chart_option.grid, JSON.parse(JSON.stringify(result)))
+    }
     if (customStyle.background) {
       chart_option.backgroundColor = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
     }
   }
 }
+export const getMarginUnit = marginForm => {
+  if (!marginForm.marginModel || marginForm.marginModel === 'auto') return null
+  if (marginForm.marginModel === 'absolute') return 'px'
+  if (marginForm.marginModel === 'relative') return '%'
+  return null
+}
 
 const hexToRgba = (hex, opacity) => {
   let rgbaColor = ''
diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index e595f0e5a9..006a267362 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -1538,9 +1538,17 @@ export const TYPE_CONFIGS = [
     properties: [
       'color-selector',
       'size-selector',
-      'title-selector'
+      'title-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'quotaColor',
         'dimensionColor'
@@ -1582,9 +1590,17 @@ export const TYPE_CONFIGS = [
     properties: [
       'color-selector',
       'size-selector',
-      'title-selector'
+      'title-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'quotaColor',
         'dimensionColor'
@@ -1627,9 +1643,17 @@ export const TYPE_CONFIGS = [
       'color-selector',
       'size-selector',
       'label-selector',
-      'title-selector'
+      'title-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -1674,9 +1698,17 @@ export const TYPE_CONFIGS = [
       'x-axis-selector',
       'y-axis-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -1754,9 +1786,17 @@ export const TYPE_CONFIGS = [
       'x-axis-selector',
       'y-axis-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -1835,9 +1875,17 @@ export const TYPE_CONFIGS = [
       'y-axis-selector',
       'y-axis-ext-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -1920,9 +1968,17 @@ export const TYPE_CONFIGS = [
       'x-axis-selector',
       'y-axis-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -1999,9 +2055,17 @@ export const TYPE_CONFIGS = [
       'x-axis-selector',
       'y-axis-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -2078,9 +2142,17 @@ export const TYPE_CONFIGS = [
       'x-axis-selector',
       'y-axis-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -2157,9 +2229,17 @@ export const TYPE_CONFIGS = [
       'x-axis-selector',
       'y-axis-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -2236,9 +2316,17 @@ export const TYPE_CONFIGS = [
       'label-selector',
       'tooltip-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -2294,9 +2382,17 @@ export const TYPE_CONFIGS = [
       'label-selector',
       'tooltip-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -2354,9 +2450,17 @@ export const TYPE_CONFIGS = [
       'tooltip-selector',
       'split-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -2417,9 +2521,17 @@ export const TYPE_CONFIGS = [
       'size-selector',
       'label-selector',
       'tooltip-selector',
-      'title-selector'
+      'title-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -2468,9 +2580,17 @@ export const TYPE_CONFIGS = [
       'x-axis-selector',
       'y-axis-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -2544,9 +2664,17 @@ export const TYPE_CONFIGS = [
       'label-selector',
       'tooltip-selector',
       'title-selector',
-      'legend-selector'
+      'legend-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
@@ -2599,9 +2727,17 @@ export const TYPE_CONFIGS = [
       'color-selector',
       'label-selector',
       'tooltip-selector',
-      'title-selector'
+      'title-selector',
+      'margin-selector'
     ],
     propertyInner: {
+      'margin-selector': [
+        'marginModel',
+        'marginTop',
+        'marginBottom',
+        'marginLeft',
+        'marginRight'
+      ],
       'color-selector': [
         'value',
         'custom',
diff --git a/frontend/src/views/chart/components/component-style/MarginSelector.vue b/frontend/src/views/chart/components/component-style/MarginSelector.vue
new file mode 100644
index 0000000000..fc7d8ee65b
--- /dev/null
+++ b/frontend/src/views/chart/components/component-style/MarginSelector.vue
@@ -0,0 +1,171 @@
+<template>
+  <div style="width: 100%">
+    <el-col>
+      <el-form ref="marginForm" :model="marginForm" label-width="80px" size="mini" :rules="rules">
+        <el-form-item v-show="showProperty('marginModel')" :label="$t('chart.margin_model')" class="form-item">
+          <el-radio-group v-model="marginForm.marginModel" size="mini" @change="changeMarginStyle('marginModel')">
+            <el-radio-button label="auto">{{ $t('chart.margin_model_auto') }}</el-radio-button>
+            <el-radio-button label="absolute">{{ $t('chart.margin_model_absolute') }}</el-radio-button>
+            <el-radio-button label="relative">{{ $t('chart.margin_model_relative') }}</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <div v-show="showProperty('marginModel') && marginForm.marginModel !== 'auto'">
+          <el-form-item v-show="showProperty('marginTop')" :label="$t('chart.text_pos_top')" class="form-item" prop="marginTop">
+            <el-input v-model="marginForm.marginTop" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginTop, 'marginTop')">
+              <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item v-show="showProperty('marginBottom')" :label="$t('chart.text_pos_bottom')" class="form-item" prop="marginBottom">
+            <el-input v-model="marginForm.marginBottom" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginBottom, 'marginBottom')">
+              <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item v-show="showProperty('marginLeft')" :label="$t('chart.text_pos_left')" class="form-item" prop="marginLeft">
+            <el-input v-model="marginForm.marginLeft" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginLeft, 'marginLeft')">
+              <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
+            </el-input>
+          </el-form-item>
+
+          <el-form-item v-show="showProperty('marginRight')" :label="$t('chart.text_pos_right')" class="form-item" prop="marginRight">
+            <el-input v-model="marginForm.marginRight" :placeholder="$t('chart.margin_placeholder')" oninput="value=value.replace(/[^\d]/g,'')" @change="changeMarginStyle(marginForm.marginRight, 'marginRight')">
+              <template v-if="unitSuffix" slot="append">{{ unitSuffix }}</template>
+            </el-input>
+          </el-form-item>
+
+        </div>
+      </el-form>
+    </el-col>
+  </div>
+</template>
+
+<script>
+import { DEFAULT_MARGIN_STYLE } from '../../chart/chart'
+import { getMarginUnit } from '@/views/chart/chart/common/common'
+export default {
+  name: 'MarginSelector',
+  props: {
+    param: {
+      type: Object,
+      required: true
+    },
+    chart: {
+      type: Object,
+      required: true
+    },
+    propertyInner: {
+      type: Array,
+      required: false,
+      default: function() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      marginForm: JSON.parse(JSON.stringify(DEFAULT_MARGIN_STYLE)),
+      rules: {
+        marginTop: [
+          { validator: this.validateMarginNumber, trigger: ['blur', 'change'] }
+        ],
+        marginBottom: [
+          { validator: this.validateMarginNumber, trigger: ['blur', 'change'] }
+        ],
+        marginLeft: [
+          { validator: this.validateMarginNumber, trigger: ['blur', 'change'] }
+        ],
+        marginRight: [
+          { validator: this.validateMarginNumber, trigger: ['blur', 'change'] }
+        ]
+      }
+    }
+  },
+  computed: {
+    unitSuffix() {
+      return getMarginUnit(this.marginForm)
+    }
+  },
+  watch: {
+    'chart': {
+      handler: function() {
+        this.initData()
+      }
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.margin) {
+          this.marginForm = customStyle.margin
+        }
+      }
+    },
+
+    changeMarginStyle(value, modifyName) {
+      this.marginForm['modifyName'] = modifyName
+      this.$emit('onMarginChange', this.marginForm)
+    },
+    showProperty(property) {
+      return this.propertyInner.includes(property)
+    },
+    validateMarginNumber(rule, value, callBack) {
+      if (value == null || value === '') {
+        callBack()
+        return
+      }
+      if (value < 0 || value > 100) {
+        callBack(new Error(this.$t('chart.margin_placeholder')))
+        this.marginForm[rule.field] = 0
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.shape-item{
+  padding: 6px;
+  border: none;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.form-item-slider ::v-deep .el-form-item__label{
+  font-size: 12px;
+  line-height: 38px;
+}
+.form-item ::v-deep .el-form-item__label{
+  font-size: 12px;
+}
+.el-select-dropdown__item{
+  padding: 0 20px;
+}
+  span{
+    font-size: 12px
+  }
+  .el-form-item{
+    margin-bottom: 6px;
+  }
+
+.switch-style{
+  position: absolute;
+  right: 10px;
+  margin-top: -4px;
+}
+.color-picker-style{
+  cursor: pointer;
+  z-index: 1003;
+}
+</style>
diff --git a/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue b/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
index 84ff33682a..c06b317fdb 100644
--- a/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
+++ b/frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue
@@ -139,7 +139,7 @@ export default {
         field: '0',
         value: '',
         color: '#ff0000ff',
-        backgroundColor: '#ffffffff',
+        backgroundColor: '#ffffff00',
         min: '0',
         max: '1'
       },
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index e44b1daa2b..61dd8a8ca0 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -757,6 +757,7 @@
             @onChangeSplitForm="onChangeSplitForm"
             @onTextChange="onTextChange"
             @onLegendChange="onLegendChange"
+            @onMarginChange="onMarginChange"
             @onChangeBackgroundForm="onChangeBackgroundForm"
           />
         </el-tab-pane>
@@ -1999,6 +2000,10 @@ export default {
       this.view.customStyle.legend = val
       this.calcStyle()
     },
+    onMarginChange(val) {
+      this.view.customStyle.margin = val
+      this.calcStyle()
+    },
 
     onLabelChange(val) {
       this.view.customAttr.label = val
diff --git a/frontend/src/views/chart/view/ChartStyle.vue b/frontend/src/views/chart/view/ChartStyle.vue
index 77894e2236..8e41267a75 100644
--- a/frontend/src/views/chart/view/ChartStyle.vue
+++ b/frontend/src/views/chart/view/ChartStyle.vue
@@ -260,6 +260,21 @@
               @onChangeBackgroundForm="onChangeBackgroundForm($event,'background-color-selector')"
             />
           </el-collapse-item>
+          <el-collapse-item
+            v-show="showPropertiesCollapse(['margin-selector'])"
+            name="margin"
+            :title="$t('panel.margin')"
+          >
+            <margin-selector
+              v-if="showProperties('margin-selector')"
+              :param="param"
+              class="attr-selector"
+              :chart="chart"
+              :property-inner="propertyInnerAll['margin-selector']"
+              @onMarginChange="onMarginChange($event,'margin-selector')"
+            />
+
+          </el-collapse-item>
         </el-collapse>
       </el-row>
     </div>
@@ -284,6 +299,7 @@ import YAxisExtSelectorAntV from '@/views/chart/components/component-style/YAxis
 import TitleSelector from '@/views/chart/components/component-style/TitleSelector'
 import TitleSelectorAntV from '@/views/chart/components/component-style/TitleSelectorAntV'
 import LegendSelector from '@/views/chart/components/component-style/LegendSelector'
+import MarginSelector from '@/views/chart/components/component-style/MarginSelector'
 import LegendSelectorAntV from '@/views/chart/components/component-style/LegendSelectorAntV'
 import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
 import SplitSelector from '@/views/chart/components/component-style/SplitSelector'
@@ -314,6 +330,7 @@ export default {
     SizeSelectorAntV,
     SizeSelector,
     ColorSelector,
+    MarginSelector,
     PluginCom
   },
   props: {
@@ -432,6 +449,10 @@ export default {
       val['propertyName'] = propertyName
       this.$emit('onLegendChange', val)
     },
+    onMarginChange(val, propertyName) {
+      val['propertyName'] = propertyName
+      this.$emit('onMarginChange', val)
+    },
     onChangeBackgroundForm(val, propertyName) {
       val['propertyName'] = propertyName
       this.$emit('onChangeBackgroundForm', val)
diff --git a/frontend/src/views/dataset/add/AddApi.vue b/frontend/src/views/dataset/add/AddApi.vue
index 6a2c651051..bc36beabc7 100644
--- a/frontend/src/views/dataset/add/AddApi.vue
+++ b/frontend/src/views/dataset/add/AddApi.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="dataset-api">
-    <p v-if="!showLeft" class="arrow-right" @click="showLeft = true">
+    <p v-show="!showLeft" class="arrow-right" @click="showLeft = true">
       <i class="el-icon-d-arrow-right" />
     </p>
-    <div v-else class="table-list">
+    <div v-show="showLeft" class="table-list">
       <p class="select-ds">
         {{ $t('deDataset.select_data_source') }}
         <i class="el-icon-d-arrow-left" @click="showLeft = false" />
@@ -153,9 +153,11 @@
 <script>
 import { listApiDatasource, post, isKettleRunning } from '@/api/dataset/dataset'
 import { dbPreview, engineMode } from '@/api/system/engine'
+import cancelMix from './cancelMix'
 
 export default {
   name: 'AddApi',
+  mixins: [cancelMix],
   props: {
     param: {
       type: Object,
@@ -281,7 +283,7 @@ export default {
       const that = this
       setTimeout(function() {
         const currentHeight = document.documentElement.clientHeight
-        that.height = currentHeight - 195 - 54
+        that.height = currentHeight - 56 - 64 - 75 - 32 - 24 - 16 - 10
       }, 10)
     },
     setActiveName({ name, datasourceId, enableCheck }) {
@@ -350,17 +352,12 @@ export default {
       post('/dataset/table/batchAdd', tables)
         .then((response) => {
           this.openMessageSuccess('deDataset.set_saved_successfully')
-          this.cancel()
+          this.cancel(response.data)
         })
         .finally(() => {
           this.loading = false
         })
     },
-
-    cancel() {
-      this.$router.push('/dataset/index')
-    },
-
     dataReset() {
       this.searchTable = ''
       this.options = []
diff --git a/frontend/src/views/dataset/add/AddDB.vue b/frontend/src/views/dataset/add/AddDB.vue
index 06d5c82607..eebf33070d 100644
--- a/frontend/src/views/dataset/add/AddDB.vue
+++ b/frontend/src/views/dataset/add/AddDB.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="dataset-db" v-loading="loading">
-    <p v-if="!showLeft" @click="showLeft = true" class="arrow-right">
+    <p v-show="!showLeft" @click="showLeft = true" class="arrow-right">
       <i class="el-icon-d-arrow-right"></i>
     </p>
-    <div class="table-list" v-else>
+    <div class="table-list" v-show="showLeft">
       <p class="select-ds">
         {{ $t('deDataset.select_data_source') }}
         <i @click="showLeft = false" class="el-icon-d-arrow-left"></i>
@@ -158,10 +158,10 @@
 import { listDatasource, post, isKettleRunning } from '@/api/dataset/dataset'
 import { engineMode, dbPreview } from '@/api/system/engine'
 import msgCfm from '@/components/msgCfm/index'
-
+import cancelMix from './cancelMix'
 export default {
   name: 'AddDB',
-  mixins: [msgCfm],
+  mixins: [ msgCfm, cancelMix],
   props: {
     param: {
       type: Object,
@@ -312,7 +312,7 @@ export default {
       const that = this
       setTimeout(function () {
         const currentHeight = document.documentElement.clientHeight
-        that.height = currentHeight - 195 - 54
+        that.height = currentHeight - 56 - 64 - 75 - 32 - 24 - 16 - 10
       }, 10)
     },
     setActiveName({ name, datasourceId, enableCheck }) {
@@ -368,16 +368,12 @@ export default {
       post('/dataset/table/batchAdd', tables)
         .then((response) => {
           this.openMessageSuccess('deDataset.set_saved_successfully')
-          this.cancel()
+          this.cancel(response.data)
         })
         .finally(() => {
           this.loading = false
         })
     },
-
-    cancel() {
-      this.$router.back()
-    },
     dataReset() {
       this.searchTable = ''
       this.options = []
diff --git a/frontend/src/views/dataset/add/AddExcel.vue b/frontend/src/views/dataset/add/AddExcel.vue
index e625892a5d..d85a267def 100644
--- a/frontend/src/views/dataset/add/AddExcel.vue
+++ b/frontend/src/views/dataset/add/AddExcel.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="dataset-excel" v-loading="loading">
-    <p v-if="!showLeft" @click="showLeft = true" class="arrow-right">
+    <p v-show="!showLeft" @click="showLeft = true" class="arrow-right">
       <i class="el-icon-d-arrow-right"></i>
     </p>
-    <div v-else class="table-list">
+    <div v-show="showLeft" class="table-list">
       <p class="select-ds">
         <span
           >{{ $t('deDataset.select_data_table ') }}
@@ -192,12 +192,13 @@ import i18n from '@/lang'
 import { $alert, $confirm } from '@/utils/message'
 import store from '@/store'
 import msgCfm from '@/components/msgCfm/index'
+import cancelMix from './cancelMix'
 
 const token = getToken()
 
 export default {
   name: 'AddExcel',
-  mixins: [msgCfm],
+  mixins: [ msgCfm, cancelMix],
   props: {
     param: {
       type: Object,
@@ -500,7 +501,7 @@ export default {
             this.loading = true
             post('/dataset/table/update', table).then((response) => {
               this.openMessageSuccess('deDataset.set_saved_successfully')
-              this.cancel()
+              this.cancel(response.data)
             })
           })
           .catch((action) => {
@@ -512,7 +513,7 @@ export default {
             post('/dataset/table/update', table)
               .then((response) => {
                 this.openMessageSuccess('deDataset.set_saved_successfully')
-                this.cancel()
+                this.cancel(response.data)
               })
               .finally(() => {
                 this.loading = false
@@ -526,16 +527,13 @@ export default {
         post('/dataset/table/update', table)
           .then((response) => {
             this.openMessageSuccess('deDataset.set_saved_successfully')
-            this.cancel()
+            this.cancel(response.data)
           })
           .finally(() => {
             this.loading = false
           })
       }
     },
-    cancel() {
-      this.$router.back()
-    },
     dataReset() {
       this.searchTable = ''
       this.options = []
diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index 8fad55ec00..7837dc9077 100644
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -371,11 +371,12 @@ import 'codemirror/addon/hint/sql-hint'
 import 'codemirror/addon/hint/show-hint'
 import { engineMode } from '@/api/system/engine'
 import msgCfm from '@/components/msgCfm/index'
-
+import cancelMix from './cancelMix'
+import _ from 'lodash'
 export default {
   name: 'AddSQL',
   components: { codemirror },
-  mixins: [msgCfm],
+  mixins: [ msgCfm, cancelMix],
   props: {
     param: {
       type: Object,
@@ -488,6 +489,11 @@ export default {
       handler: function () {
         this.initTableInfo()
       }
+    },
+    sqlHeight: {
+      handler: function () {
+        this.calHeight()
+      }
     }
   },
   mounted() {
@@ -560,14 +566,11 @@ export default {
         this.tableData = response.data
       })
     },
-    calHeight() {
-      const that = this
-      setTimeout(function () {
-        const currentHeight = document.documentElement.clientHeight
-        that.height =
-          currentHeight - 56 - 30 - 26 - 25 - 43 - 160 - 10 - 37 - 20 - 10 - 16
-      }, 10)
-    },
+    calHeight: _.debounce(function() {
+      const sqlHeight = Math.max(this.sqlHeight, 248)
+      const currentHeight = document.documentElement.clientHeight
+      this.height = currentHeight - sqlHeight - 56 - 54 - 36 - 64
+    }, 200),
     initDataSource() {
       listDatasource().then((response) => {
         this.options = response.data.filter((item) => item.type !== 'api')
@@ -636,7 +639,7 @@ export default {
         return
       }
       this.parseVariable()
-      this.loading = true;
+      this.loading = true
       const table = {
         id: this.param.tableId,
         name: this.param.name,
@@ -651,18 +654,15 @@ export default {
           isBase64Encryption: true
         })
       }
-      post('/dataset/table/update', table).then((response) => {
-        this.openMessageSuccess('deDataset.set_saved_successfully')
-        this.cancel()
-      }).finally(() => {
-        this.loading = false;
-      }) 
+      post('/dataset/table/update', table)
+        .then((response) => {
+          this.openMessageSuccess('deDataset.set_saved_successfully')
+          this.cancel(response.data)
+        })
+        .finally(() => {
+          this.loading = false
+        })
     },
-
-    cancel() {
-      this.$router.push('/dataset/index')
-    },
-
     showSQL(val) {
       this.sql = val || ''
     },
diff --git a/frontend/src/views/dataset/add/AddUnion.vue b/frontend/src/views/dataset/add/AddUnion.vue
index 29b2d09951..d5d860917c 100644
--- a/frontend/src/views/dataset/add/AddUnion.vue
+++ b/frontend/src/views/dataset/add/AddUnion.vue
@@ -41,7 +41,7 @@
         }}</span>
         <span @mousedown="mousedownDrag" class="drag"></span>
       </div>
-      <union-preview :table="previewTable" :dataset="dataset" />
+      <union-preview :unionHeight="unionHeight" :table="previewTable" :dataset="dataset" />
     </div>
     <!--选择数据集-->
     <el-drawer
@@ -107,8 +107,10 @@ import datasetTree from '@/views/dataset/common/datasetTree'
 import UnionEdit from '@/views/dataset/add/union/UnionEdit'
 import { post } from '@/api/dataset/dataset'
 import UnionPreview from '@/views/dataset/add/union/UnionPreview'
+import cancelMix from './cancelMix'
 export default {
   name: 'AddUnion',
+  mixins: [cancelMix],
   components: {
     UnionPreview,
     UnionEdit,
@@ -218,14 +220,11 @@ export default {
       }
       post('/dataset/table/update', table).then((response) => {
         this.$emit('saveSuccess', table)
-        this.cancel()
+        this.cancel(response.data)
       }).finally(() => {
         this.loading = false;
       }) 
     },
-    cancel() {
-      this.$router.back()
-    },
     selectDs() {
       this.selectDsDialog = true
     },
diff --git a/frontend/src/views/dataset/add/cancelMix.js b/frontend/src/views/dataset/add/cancelMix.js
new file mode 100644
index 0000000000..7b70a200e4
--- /dev/null
+++ b/frontend/src/views/dataset/add/cancelMix.js
@@ -0,0 +1,19 @@
+export default {
+    methods: {
+        cancel(arr = []) {
+            if (arr.length === 1) {
+                const [dataset] = arr;
+                const { id, name } = dataset;
+                this.$router.push({
+                    name: 'dataset',
+                    params: {
+                        id,
+                        name
+                    }
+                })
+            } else {
+                this.$router.back()
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/views/dataset/add/union/UnionPreview.vue b/frontend/src/views/dataset/add/union/UnionPreview.vue
index c3e4c21359..ee944c51aa 100644
--- a/frontend/src/views/dataset/add/union/UnionPreview.vue
+++ b/frontend/src/views/dataset/add/union/UnionPreview.vue
@@ -4,7 +4,7 @@
       ref="plxTable"
       size="mini"
       style="width: 100%"
-      height="100%"
+      :height="height"
       :checkbox-config="{ highlight: true }"
       :width-resize="true"
     >
@@ -22,6 +22,7 @@
 
 <script>
 import { post } from '@/api/dataset/dataset'
+import _ from 'lodash'
 
 export default {
   name: 'UnionPreview',
@@ -33,11 +34,15 @@ export default {
     dataset: {
       type: Array,
       required: true
-    }
+    },
+    unionHeight: {
+      type: Number,
+      default: 298
+    },
   },
   data() {
     return {
-      height: 'auto',
+      height: 200,
       fields: [],
       data: []
     }
@@ -45,12 +50,26 @@ export default {
   watch: {
     table: function () {
       this.initPreview()
+    },
+    unionHeight: {
+      handler: function () {
+        this.calHeight()
+      }
     }
   },
   mounted() {
     this.initPreview()
+    this.calHeight()
+    window.onresize = () => {
+      this.calHeight()
+    }
   },
   methods: {
+    calHeight: _.debounce(function() {
+      const unionHeight = Math.max(this.unionHeight, 298)
+      const currentHeight = document.documentElement.clientHeight
+      this.height = currentHeight - unionHeight - 56 - 54 - 36
+    }, 200),
     initPreview() {
       if (this.dataset && this.dataset.length > 0) {
         post('/dataset/table/unionPreview', this.table).then((response) => {
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index 141d660b9b..bbac9249ca 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -222,10 +222,7 @@
                   />
                 </span>
                 <span
-                  v-if="
-                    data.modelInnerType === 'db' ||
-                    data.modelInnerType === 'sql'
-                  "
+                  v-if="['db', 'sql'].includes(data.modelInnerType)"
                 >
                   <span v-if="data.mode === 0" style="margin-left: 6px"
                     ><i class="el-icon-s-operation"
@@ -241,6 +238,7 @@
                     overflow: hidden;
                     text-overflow: ellipsis;
                   "
+                  :class="[{ 'de-fill-block': !['db', 'sql'].includes(data.modelInnerType)}]"
                   :title="data.name"
                   >{{ data.name }}</span
                 >
@@ -498,6 +496,7 @@ export default {
       },
       isTreeSearch: false,
       kettleRunning: false,
+      pageCreated: false,
       engineMode: 'local',
       searchPids: [], // 查询命中的pid
       filterText: '',
@@ -528,14 +527,17 @@ export default {
     }
   },
   activated() {
+    if (!this.pageCreated) return;
     const dataset = this.$refs.datasetTreeRef?.getCurrentNode()
-    if (!dataset) return
+    const { id, name } = this.$route.params
     queryAuthModel({ modelType: 'dataset' }, true).then((res) => {
       localStorage.setItem('dataset-tree', JSON.stringify(res.data))
       this.tData = res.data
       this.$nextTick(() => {
         this.$refs.datasetTreeRef?.filter(this.filterText)
-        if (dataset) {
+        if (id && name.includes(this.filterText)) {
+          this.dfsTableData(this.tData, id)
+        } else if (dataset) {
           this.$refs.datasetTreeRef?.setCurrentNode(dataset)
           this.nodeClick(dataset)
         }
@@ -543,6 +545,7 @@ export default {
     })
   },
   created() {
+    this.pageCreated = true;
     this.kettleState()
     engineMode().then((res) => {
       this.engineMode = res.data
@@ -553,6 +556,19 @@ export default {
     this.refresh()
   },
   methods: {
+    dfsTableData(arr, id) {
+      arr.some(ele => {
+        if(ele.id === id) {
+          this.$refs.datasetTreeRef?.setCurrentNode(ele)
+          this.nodeClick(ele)
+          this.expandedArray.push(id)
+          return true
+        } else if (ele.children?.length) {
+          this.dfsTableData(ele.children, id)
+        }
+        return false
+      });
+    },
     nameRepeat(value) {
       if (!this.fileList || this.fileList.length === 0) {
         return false
@@ -979,8 +995,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.search-input {
-  padding: 12px 0;
+.de-fill-block {
+  margin-left: 35px !important;
 }
 
 .custom-tree-container {
diff --git a/frontend/src/views/system/datasource/DsMain.vue b/frontend/src/views/system/datasource/DsMain.vue
index 25d96e55e9..0e8d885d3a 100644
--- a/frontend/src/views/system/datasource/DsMain.vue
+++ b/frontend/src/views/system/datasource/DsMain.vue
@@ -121,10 +121,9 @@ export default {
 <style scoped lang="scss">
 .de-ds-container {
   height: 100%;
-  // height: calc(100vh - 56px);
   width: 100%;
   overflow: hidden;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   display: flex;
   box-sizing: border-box;
   .el-empty {
diff --git a/frontend/src/views/system/datasource/DsTree.vue b/frontend/src/views/system/datasource/DsTree.vue
index ac396184f0..cdbea3c930 100644
--- a/frontend/src/views/system/datasource/DsTree.vue
+++ b/frontend/src/views/system/datasource/DsTree.vue
@@ -3,7 +3,7 @@
     <el-col>
       <el-row class="title-css" v-show="showView === 'Datasource'">
         <el-col class="title-text" :span="12">
-          {{ $t("commons.datasource") }}
+          {{ $t('commons.datasource') }}
         </el-col>
         <el-col class="title-operate" :span="12">
           <el-tooltip
@@ -111,7 +111,11 @@
                   v-if="data.type === 'folder'"
                   effect="dark"
                   :content="
-                    $t(showView === 'Driver' ? 'driver.add' : 'datasource.add_data_source')
+                    $t(
+                      showView === 'Driver'
+                        ? 'driver.add'
+                        : 'datasource.add_data_source'
+                    )
                   "
                   placement="top"
                 >
@@ -133,11 +137,11 @@
                     <slot>
                       <el-dropdown-item command="edit">
                         <i class="el-icon-edit"></i>
-                        {{ $t("chart.edit") }}
+                        {{ $t('chart.edit') }}
                       </el-dropdown-item>
                       <el-dropdown-item command="delete">
                         <i class="el-icon-delete"></i>
-                        {{ $t("chart.delete") }}
+                        {{ $t('chart.delete') }}
                       </el-dropdown-item>
                     </slot>
                   </el-dropdown-menu>
@@ -166,7 +170,10 @@
           :rules="rule"
         >
           <el-form-item :label="$t('datasource.driver_name')" prop="name">
-            <el-input v-model="driverForm.name" :placeholder="$t('fu.search_bar.please_input')" />
+            <el-input
+              v-model="driverForm.name"
+              :placeholder="$t('fu.search_bar.please_input')"
+            />
           </el-form-item>
           <el-form-item :label="$t('datasource.drive_type')" prop="type">
             <el-select
@@ -189,9 +196,9 @@
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
-          <deBtn secondary @click="close()">{{ $t("commons.cancel") }}</deBtn>
+          <deBtn secondary @click="close()">{{ $t('commons.cancel') }}</deBtn>
           <deBtn type="primary" size="mini" @click="saveDriver(driverForm)"
-            >{{ $t("commons.save") }}
+            >{{ $t('commons.save') }}
           </deBtn>
         </div>
       </el-dialog>
@@ -204,34 +211,43 @@
         class="de-dialog-form"
         append-to-body
       >
-        <el-tabs v-model="tabActive" @tab-click="changeTab">
+        <el-tabs v-model="tabActive">
           <el-tab-pane :label="$t('datasource.all')" name="all"> </el-tab-pane>
-          <el-tab-pane :label="$t('datasource.relational_database')" name="reDb"> </el-tab-pane>
-          <el-tab-pane :label="$t('datasource.non_relational_database')" name="noReDb">
+          <el-tab-pane
+            :label="$t('datasource.relational_database')"
+            name="RDBMS"
+          >
+          </el-tab-pane>
+          <el-tab-pane
+            :label="$t('datasource.non_relational_database')"
+            name="NORDBMS"
+          >
+          </el-tab-pane>
+          <el-tab-pane :label="$t('datasource.other')" name="OTHER">
           </el-tab-pane>
-          <el-tab-pane :label="$t('datasource.other')" name="other"> </el-tab-pane>
-          <div class="db-container">
-            <div
-              @click="addDb(db)"
-              v-for="db in dsTypes"
-              :key="db.type"
-              class="db-card"
-            >
-              <img
-                src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fgips0.baidu.com%2Fit%2Fu%3D3429312337%2C2430696955%26fm%3D3030%26app%3D3030%26f%3DJPEG%3Fw%3D121%26h%3D74%26s%3D51321C7281B1598818E875C1030010B0&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f242,150&n=0&g=0n&q=100&fmt=auto?sec=1662483600&t=53d1d1fe51561bb626c94ce63b5b31b8"
-                alt=""
-              />
-              <p class="db-name">{{ db.name }}</p>
-            </div>
-          </div>
         </el-tabs>
+        <div class="db-container">
+          <div
+            @click="addDb(db)"
+            v-for="(db, index) in databaseList"
+            :key="db.type"
+            class="db-card"
+            :class="[{ marLeft: index % 4 === 0 }]"
+          >
+            <img
+              src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fgips0.baidu.com%2Fit%2Fu%3D3429312337%2C2430696955%26fm%3D3030%26app%3D3030%26f%3DJPEG%3Fw%3D121%26h%3D74%26s%3D51321C7281B1598818E875C1030010B0&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f242,150&n=0&g=0n&q=100&fmt=auto?sec=1662483600&t=53d1d1fe51561bb626c94ce63b5b31b8"
+              alt=""
+            />
+            <p class="db-name">{{ db.name }}</p>
+          </div>
+        </div>
       </el-dialog>
     </el-col>
   </el-col>
 </template>
 <script>
-import { mapGetters } from "vuex";
-import i18n from "@/lang";
+import { mapGetters } from 'vuex'
+import i18n from '@/lang'
 import {
   listDatasource,
   listDatasourceByType,
@@ -241,368 +257,371 @@ import {
   addDriver,
   delDriver,
   listDriverByType,
-  updateDriver,
-} from "@/api/system/datasource";
-import { ApplicationContext } from "@/utils/ApplicationContext";
-import deTextarea from "@/components/deCustomCm/deTextarea.vue";
-import msgCfm from "@/components/msgCfm";
+  updateDriver
+} from '@/api/system/datasource'
+import { ApplicationContext } from '@/utils/ApplicationContext'
+import deTextarea from '@/components/deCustomCm/deTextarea.vue'
+import msgCfm from '@/components/msgCfm'
 export default {
-  name: "DsTree",
+  name: 'DsTree',
   mixins: [msgCfm],
   components: { deTextarea },
   props: {
     datasource: {
       type: Object,
-      default: null,
-    },
+      default: null
+    }
   },
   data() {
     return {
-      tabActive: "all",
+      tabActive: 'all',
       dsTypeRelate: false,
       expandedArray: [],
       tData: [],
       dsTypes: [],
       dsTypesForDriver: [],
       showSearchInput: false,
-      key: "",
-      showView: "Datasource",
-      dialogTitle: "",
+      key: '',
+      showView: 'Datasource',
+      dialogTitle: '',
       editDriver: false,
       driverForm: {
-        name: "",
-        desc: "",
-        type: "",
+        name: '',
+        desc: '',
+        type: ''
       },
       params: {},
       rule: {
         name: [
           {
             required: true,
-            message: i18n.t("datasource.input_name"),
-            trigger: "blur",
+            message: i18n.t('datasource.input_name'),
+            trigger: 'blur'
           },
           {
             min: 2,
             max: 50,
-            message: i18n.t("datasource.input_limit_2_25", [2, 25]),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.input_limit_2_25', [2, 25]),
+            trigger: 'blur'
+          }
         ],
         desc: [
           {
             required: true,
-            message: i18n.t("datasource.input_name"),
-            trigger: "blur",
+            message: i18n.t('datasource.input_name'),
+            trigger: 'blur'
           },
           {
             min: 2,
             max: 200,
-            message: i18n.t("datasource.input_limit_2_25", [2, 25]),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.input_limit_2_25', [2, 25]),
+            trigger: 'blur'
+          }
         ],
         type: [
           {
             required: true,
-            message: i18n.t("datasource.please_choose_type"),
-            trigger: "blur",
-          },
-        ],
-      },
-    };
+            message: i18n.t('datasource.please_choose_type'),
+            trigger: 'blur'
+          }
+        ]
+      }
+    }
   },
   watch: {
     key(val) {
-      this.$refs.myDsTree.filter(val);
-    },
+      this.$refs.myDsTree.filter(val)
+    }
   },
   computed: {
-    ...mapGetters(["user"]),
+    ...mapGetters(['user']),
+    databaseList() {
+      if (this.tabActive === 'all') {
+        return this.dsTypes
+      }
+      return this.dsTypes.filter(
+        (ele) => ele.databaseClassification === this.tabActive
+      )
+    }
   },
   created() {
-    this.queryTreeDatas();
-    this.datasourceTypes();
+    this.queryTreeDatas()
+    this.datasourceTypes()
   },
   methods: {
-    changeTab() {},
     filterNode(value, data) {
-      if (!value) return true;
-      return data.name.indexOf(value) !== -1;
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
     },
     showSearchWidget() {
-      this.showSearchInput = true;
+      this.showSearchInput = true
     },
     closeSearchWidget() {
-      this.key = "";
-      this.showSearchInput = false;
+      this.key = ''
+      this.showSearchInput = false
     },
     queryTreeDatas() {
-      if (this.showView === "Datasource") {
+      if (this.showView === 'Datasource') {
         listDatasource().then((res) => {
-          this.tData = this.buildTree(res.data);
-        });
+          this.tData = this.buildTree(res.data)
+        })
       }
-      if (this.showView === "Driver") {
+      if (this.showView === 'Driver') {
         listDrivers().then((res) => {
-          this.tData = this.buildTree(res.data);
-        });
+          this.tData = this.buildTree(res.data)
+        })
       }
     },
     datasourceTypes() {
       listDatasourceType().then((res) => {
-        this.dsTypes = res.data;
+        this.dsTypes = res.data
         this.dsTypes.forEach((item) => {
           if (item.isJdbc) {
-            this.dsTypesForDriver.push(item);
+            this.dsTypesForDriver.push(item)
           }
-        });
-      });
+        })
+      })
     },
     refreshType(datasource) {
       const method =
-        this.showView === "Datasource"
-          ? listDatasourceByType
-          : listDriverByType;
-      let typeData = [];
+        this.showView === 'Datasource' ? listDatasourceByType : listDriverByType
+      let typeData = []
       method(datasource.type).then((res) => {
-        typeData = this.buildTree(res.data);
+        typeData = this.buildTree(res.data)
         if (typeData.length === 0) {
           const index = this.tData.findIndex((item) => {
             if (item.id === datasource.type) {
-              return true;
+              return true
             }
-          });
-          this.tData.splice(index, 1);
+          })
+          this.tData.splice(index, 1)
         } else {
-          let find = false;
+          let find = false
           for (let index = 0; index < this.tData.length; index++) {
             if (typeData[0].id === this.tData[index].id) {
-              this.tData[index].children = typeData[0].children;
+              this.tData[index].children = typeData[0].children
               for (let i = 0; i < this.tData[index].children.length; i++) {
                 if (this.tData[index].children[i].id === datasource.id) {
-                  this.showInfo({ data: this.tData[index].children[i] });
+                  this.showInfo({ data: this.tData[index].children[i] })
                 }
               }
-              find = true;
+              find = true
             }
           }
           if (!find) {
-            this.tData.push(typeData[0]);
+            this.tData.push(typeData[0])
           }
         }
-      });
+      })
     },
     buildTree(array) {
-      const types = {};
-      const newArr = [];
+      const types = {}
+      const newArr = []
       for (let index = 0; index < array.length; index++) {
-        const element = array[index];
+        const element = array[index]
         if (this.msgNodeId) {
           if (element.id === this.msgNodeId) {
-            element.msgNode = true;
+            element.msgNode = true
           }
         }
         if (!(element.type in types)) {
-          types[element.type] = [];
+          types[element.type] = []
           newArr.push({
             id: element.type,
             name: element.typeDesc,
-            type: "folder",
-            children: types[element.type],
-          });
+            type: 'folder',
+            children: types[element.type]
+          })
         }
-        types[element.type].push(element);
+        types[element.type].push(element)
       }
-      return newArr;
+      return newArr
     },
     addFolder() {
-      if (this.showView === "Driver") {
-        this.dialogTitle = this.$t("datasource.add_driver");
-        this.editDriver = true;
-        this.switchMain("DriverForm", {}, this.tData, this.dsTypes);
+      if (this.showView === 'Driver') {
+        this.dialogTitle = this.$t('datasource.add_driver')
+        this.editDriver = true
+        this.switchMain('DriverForm', {}, this.tData, this.dsTypes)
       } else {
-        this.dsTypeRelate = true;
+        this.dsTypeRelate = true
       }
     },
     addDriver() {
-      this.dialogTitle = this.$t("datasource.add_driver");
-      this.editDriver = true;
+      this.dialogTitle = this.$t('datasource.add_driver')
+      this.editDriver = true
     },
     driverMgm() {
-      this.$emit("switch-main", {});
-      this.$emit("switch-mgm", "driverMgm");
-      this.showView = "Driver";
-      this.expandedArray = [];
-      this.tData = [];
-      this.queryTreeDatas();
+      this.$emit('switch-main', {})
+      this.$emit('switch-mgm', 'driverMgm')
+      this.showView = 'Driver'
+      this.expandedArray = []
+      this.tData = []
+      this.queryTreeDatas()
     },
     dsMgm() {
-      this.$emit("switch-main", {});
-      this.showView = "Datasource";
-      this.expandedArray = [];
-      this.tData = [];
-      this.queryTreeDatas();
+      this.$emit('switch-main', {})
+      this.showView = 'Datasource'
+      this.expandedArray = []
+      this.tData = []
+      this.queryTreeDatas()
     },
     addDb({ type }) {
       this.$router.push({
-        path: "/ds-form",
-        query: { type },
-      });
+        path: '/ds-form',
+        query: { type }
+      })
     },
     addFolderWithType(data) {
-      if (this.showView === "Driver") {
-        this.driverForm.type = data.id;
-        this.dialogTitle = this.$t("datasource.add_driver");
-        this.editDriver = true;
+      if (this.showView === 'Driver') {
+        this.driverForm.type = data.id
+        this.dialogTitle = this.$t('datasource.add_driver')
+        this.editDriver = true
       } else {
         this.$router.push({
-          path: "/ds-form",
-          query: { type: data.id },
-        });
+          path: '/ds-form',
+          query: { type: data.id }
+        })
       }
     },
     nodeClick(node, data) {
-      if (node.type === "folder") return;
-      this.showInfo(data);
+      if (node.type === 'folder') return
+      this.showInfo(data)
     },
     clickFileMore(param) {
-      const { optType, data } = param;
+      const { optType, data } = param
       switch (optType) {
-        case "edit":
-          this.edit(data);
-          break;
-        case "delete":
-          this._handleDelete(data);
-          break;
+        case 'edit':
+          this.edit(data)
+          break
+        case 'delete':
+          this._handleDelete(data)
+          break
         default:
-          break;
+          break
       }
     },
     showInfo(row) {
-      if (this.showView === "Driver") {
-        const param = { ...row.data, ...{ showModel: "show" } };
+      if (this.showView === 'Driver') {
+        const param = { ...row.data, ...{ showModel: 'show' } }
         this.switchMain(
-          this.showView === "Datasource" ? "DsForm" : "DriverForm",
+          this.showView === 'Datasource' ? 'DsForm' : 'DriverForm',
           param,
           this.tData,
           this.dsTypes
-        );
+        )
       } else {
-        this.switchMain("dsTable", row.data);
+        this.switchMain('dsTable', row.data)
       }
     },
     handleCommand(type, data) {
       switch (type) {
-        case "edit":
-          this._handleEditer(data);
-          break;
-        case "delete":
-          this._handleDelete(data);
-          break;
+        case 'edit':
+          this._handleEditer(data)
+          break
+        case 'delete':
+          this._handleDelete(data)
+          break
         default:
-          break;
+          break
       }
     },
     _handleEditer(row) {
-      if (this.showView === "Datasource") {
-        const param = { ...row, ...{ showModel: "show" } };
-        this.switchMain(
-          'DsForm',
-          param,
-          this.tData,
-          this.dsTypes
-        );
+      if (this.showView === 'Datasource') {
+        const param = { ...row, ...{ showModel: 'show' } }
+        this.switchMain('DsForm', param, this.tData, this.dsTypes)
         return
       }
-      this.editDriver = true;
-      this.dialogTitle = this.$t('datasource.edit_driver');
-      this.driverForm = row;
+      this.editDriver = true
+      this.dialogTitle = this.$t('datasource.edit_driver')
+      this.driverForm = row
     },
     _handleDelete(datasource) {
       const params = {
-        title: this.showView === "Datasource" ? 'datasource.this_data_source' : 'datasource.delete_this_driver',
+        title:
+          this.showView === 'Datasource'
+            ? 'datasource.this_data_source'
+            : 'datasource.delete_this_driver',
         cb: () => {
-          let method = delDriver;
-          let parma = { type: datasource.type, id: datasource.id };
-          if (this.showView === "Datasource") {
-            method = delDs;
-            parma = datasource.id;
+          let method = delDriver
+          let parma = { type: datasource.type, id: datasource.id }
+          if (this.showView === 'Datasource') {
+            method = delDs
+            parma = datasource.id
           }
           method(parma).then((res) => {
             if (res.success) {
-              this.openMessageSuccess("commons.delete_success");
-              this.switchMain("", {}, this.tData, this.dsTypes);
-              this.refreshType(datasource);
+              this.openMessageSuccess('commons.delete_success')
+              this.switchMain('', {}, this.tData, this.dsTypes)
+              this.refreshType(datasource)
             } else {
-              this.openMessageSuccess(res.message, "error")
+              this.openMessageSuccess(res.message, 'error')
             }
-          });
+          })
         }
       }
       this.handlerConfirm(params)
     },
     switchMain(component, componentParam, tData, dsTypes) {
-      if (component === "DsForm") {
-        const { id, type, showModel } = componentParam;
+      if (component === 'DsForm') {
+        const { id, type, showModel } = componentParam
         this.$router.push({
-          path: "/ds-form",
+          path: '/ds-form',
           query: {
             id,
             type,
             showModel,
-            msgNodeId: this.msgNodeId,
-          },
-        });
-        return;
+            msgNodeId: this.msgNodeId
+          }
+        })
+        return
       }
-      this.$emit("switch-main", {
+      this.$emit('switch-main', {
         component,
         componentParam,
         tData,
-        dsTypes,
-      });
+        dsTypes
+      })
     },
     markInvalid(msgParam) {
-      const param = JSON.parse(msgParam);
-      const msgNodeId = param.id;
-      this.msgNodeId = msgNodeId;
+      const param = JSON.parse(msgParam)
+      const msgNodeId = param.id
+      this.msgNodeId = msgNodeId
       this.$nextTick(() => {
         this.tData.forEach((folder) => {
-          const nodes = folder.children;
+          const nodes = folder.children
           nodes.forEach((node) => {
             if (node.id === msgNodeId) {
-              node.msgNode = true;
+              node.msgNode = true
             }
-          });
-        });
-      });
+          })
+        })
+      })
     },
     close() {
-      this.$refs["driverForm"].resetFields();
-      this.editDriver = false;
+      this.$refs['driverForm'].resetFields()
+      this.editDriver = false
       this.driverForm = {
-        name: "",
-        desc: "",
-        type: "",
-      };
+        name: '',
+        desc: '',
+        type: ''
+      }
     },
     saveDriver(driverForm) {
-      this.$refs["driverForm"].validate((valid) => {
+      this.$refs['driverForm'].validate((valid) => {
         if (valid) {
-          const req = driverForm.id ?  updateDriver : addDriver;
+          const req = driverForm.id ? updateDriver : addDriver
           req(driverForm).then((res) => {
-            this.openMessageSuccess("dataset.save_success")
-            this.refreshType(driverForm);
-            this.close();
-          });
+            this.openMessageSuccess('dataset.save_success')
+            this.refreshType(driverForm)
+            this.close()
+          })
         } else {
-          return false;
+          return false
         }
-      });
-    },
-  },
-};
+      })
+    }
+  }
+}
 </script>
 <style lang="scss" scoped>
 .custom-tree-container {
@@ -660,8 +679,10 @@ export default {
   max-height: 674px;
   overflow-y: auto;
   display: flex;
-  justify-content: space-between;
   flex-wrap: wrap;
+  margin-top: -3px;
+  position: relative;
+  z-index: 10;
   .db-card {
     height: 193px;
     width: 270px;
@@ -670,7 +691,8 @@ export default {
     background: #ffffff;
     border: 1px solid #dee0e3;
     border-radius: 4px;
-    margin-top: 24px;
+    margin-bottom: 24px;
+    margin-left: 22px;
     img {
       width: 100%;
       height: 154.58px;
@@ -689,5 +711,9 @@ export default {
       box-shadow: 0px 6px 24px rgba(31, 35, 41, 0.08);
     }
   }
+
+  .marLeft {
+    margin-left: 0;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/system/datasource/dsTable.vue b/frontend/src/views/system/datasource/dsTable.vue
index 3a1db9d51c..c3bd80c703 100644
--- a/frontend/src/views/system/datasource/dsTable.vue
+++ b/frontend/src/views/system/datasource/dsTable.vue
@@ -20,13 +20,10 @@
       </el-col>
     </el-row>
     <div class="table-container">
-      <grid-table
+      <el-table
         v-loading="loading"
-        :tableData="tableData"
-        :columns="[]"
-        :pagination="paginationConfig"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
+        :data="filterTable"
+        :style="{ width: '100%' }"
       >
         <el-table-column
           key="name"
@@ -34,28 +31,20 @@
           :label="$t('datasource.table_name')"
         />
         <el-table-column
-          slot="__operation"
           :label="$t('commons.operating')"
-          key="__operation"
           fixed="right"
-          width="168"
+          width="108"
         >
           <template slot-scope="scope">
-            <el-button
-              @click="createtDataset(scope.row)"
-              class="text-btn mar3 mar6"
-              type="text"
-              >{{ $t("datasource.create_dataset") }}</el-button
-            >
             <el-button
               @click="selectDataset(scope.row)"
-              class="text-btn"
+              class="de-text-btn mar3"
               type="text"
               >{{ $t("dataset.detail") }}</el-button
             >
           </template>
         </el-table-column>
-      </grid-table>
+      </el-table>
     </div>
     <el-drawer
       :title="$t('dataset.detail')"
@@ -106,11 +95,9 @@
 
 <script>
 import keyEnter from "@/components/msgCfm/keyEnter.js";
-import GridTable from "@/components/gridTable/index.vue";
 import {dsTable, post} from "@/api/dataset/dataset";
 export default {
   mixins: [keyEnter],
-  components: { GridTable },
   props: {
     params: {
       type: Object,
@@ -123,22 +110,18 @@ export default {
       dsTableDetail: {},
       nikeName: "",
       loading: false,
-      paginationConfig: {
-        currentPage: 1,
-        pageSize: 10,
-        total: 0,
-      },
-      dsTableData: [{date: 1}],
-      tableData: [{ name: 1 }],
+      dsTableData: [],
+      tableData: [],
+      filterTable: []
     };
   },
   created() {
-    post('/datasource/getTables/' + this.params.id, {}).then((response) => {
-      this.tableData = response.data
-    })
+    this.search()
   },
   methods: {
-    createtDataset(row) {},
+    initSearch() {
+      this.filterTable = this.tableData.filter(ele => ele.name.includes(this.nikeName))
+    },
     selectDataset(row) {
       this.dsTableDetail = row;
       this.userDrawer = true;
@@ -148,36 +131,14 @@ export default {
         this.dsTableData = response.data
       })
     },
-    handleSizeChange(pageSize) {
-      this.paginationConfig.currentPage = 1;
-      this.paginationConfig.pageSize = pageSize;
-      this.search();
-    },
-    handleCurrentChange(currentPage) {
-      this.paginationConfig.currentPage = currentPage;
-      this.search();
-    },
-    initSearch() {
-      this.handleCurrentChange(1);
-    },
     search() {
       this.loading = true;
-      const param = {
-        conditions: [],
-      };
-      if (this.nikeName) {
-        param.conditions.push({
-          field: `dataset_table_task.name`,
-          operator: "like",
-          value: this.nikeName,
-        });
-      }
-      const { currentPage, pageSize } = this.paginationConfig;
-      dsTable(currentPage, pageSize, this.params.id).then((response) => {
-        this.tableData = response.data.listObject;
-        this.paginationConfig.total = response.data.itemCount;
+      post('/datasource/getTables/' + this.params.id, {}).then((response) => {
+        this.tableData = response.data
+        this.initSearch()
+      }).finally(() => {
         this.loading = false;
-      });
+      })
     },
   },
 };
@@ -204,6 +165,9 @@ export default {
   height: 100%;
   padding: 10px 14px;
   box-sizing: border-box;
+  .mar3 {
+    margin-left: -5px;
+  }
   .table-name {
     font-family: PingFang SC;
     font-size: 16px;
diff --git a/frontend/src/views/system/task/DatasetTaskList.vue b/frontend/src/views/system/task/DatasetTaskList.vue
index c71a903ed5..3c99b740f2 100644
--- a/frontend/src/views/system/task/DatasetTaskList.vue
+++ b/frontend/src/views/system/task/DatasetTaskList.vue
@@ -104,6 +104,7 @@
         @selection-change="handleSelectionChange"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
+        ref="multipleTable"
       >
         <el-table-column type="selection" width="55" />
         <el-table-column
@@ -507,11 +508,18 @@ export default {
       const { currentPage, pageSize } = this.paginationConfig;
       datasetTaskList(currentPage, pageSize, param, showLoading).then(
         (response) => {
+          const multipleSelection = this.multipleSelection.map(ele => ele.id)
           this.data = response.data.listObject;
-          // this.data.forEach((item) => {
-          //   this.taskStatus(item);
-          // });
           this.paginationConfig.total = response.data.itemCount;
+          if (multipleSelection.length) {
+            this.$nextTick(() => {
+              this.data.forEach(row => {
+                if (multipleSelection.includes(row.id)) {
+                  this.$refs.multipleTable.toggleRowSelection(row);
+                }
+              });
+            })
+          }
         }
       );
     },