diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 988674d5cc..1287b31817 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1160,7 +1160,8 @@ export default {
     union: 'Union',
     edit_union_relation: 'Edit Union Relation',
     add_union_relation: 'Add Union Relation',
-    field_select: 'Select Field'
+    field_select: 'Select Field',
+    add_union_field: 'Add Union Field'
   },
   datasource: {
     datasource: 'Data Source',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 7cb081534b..88c26ca89b 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1161,7 +1161,8 @@ export default {
     union: '關聯',
     edit_union_relation: '編輯關聯關系',
     add_union_relation: '新建關聯關系',
-    field_select: '字段選擇'
+    field_select: '字段選擇',
+    add_union_field: '添加關聯字段'
   },
   datasource: {
     datasource: '數據源',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index c8cb2ec8f6..9d7eabbb81 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1163,7 +1163,8 @@ export default {
     union: '关联',
     edit_union_relation: '编辑关联关系',
     add_union_relation: '新建关联关系',
-    field_select: '字段选择'
+    field_select: '字段选择',
+    add_union_field: '添加关联字段'
   },
   datasource: {
     datasource: '数据源',
diff --git a/frontend/src/views/dataset/add/AddUnion.vue b/frontend/src/views/dataset/add/AddUnion.vue
index 329bbeb7ab..07c09f10df 100644
--- a/frontend/src/views/dataset/add/AddUnion.vue
+++ b/frontend/src/views/dataset/add/AddUnion.vue
@@ -95,7 +95,7 @@ export default {
             currentDsField: [],
             childrenDs: [],
             unionToParent: {
-              unionType: '', // left join,right join,inner join
+              unionType: 'left', // left join,right join,inner join
               unionFields: [
                 {
                   parentField: {},
@@ -117,7 +117,7 @@ export default {
         currentDsField: [],
         childrenDs: [],
         unionToParent: {
-          unionType: '',
+          unionType: 'left',
           unionFields: []
         },
         allChildCount: 0
diff --git a/frontend/src/views/dataset/add/union/NodeItem.vue b/frontend/src/views/dataset/add/union/NodeItem.vue
index dddd175d24..2528462454 100644
--- a/frontend/src/views/dataset/add/union/NodeItem.vue
+++ b/frontend/src/views/dataset/add/union/NodeItem.vue
@@ -60,7 +60,7 @@ export default {
         currentDsField: [],
         childrenDs: [],
         unionToParent: {
-          unionType: '',
+          unionType: 'left',
           unionFields: []
         },
         allChildCount: 0
diff --git a/frontend/src/views/dataset/add/union/UnionEdit.vue b/frontend/src/views/dataset/add/union/UnionEdit.vue
index c020b1f4e8..486a70d80c 100644
--- a/frontend/src/views/dataset/add/union/UnionEdit.vue
+++ b/frontend/src/views/dataset/add/union/UnionEdit.vue
@@ -3,24 +3,26 @@
     <div class="field-style">
       <div class="fields">
         <p>{{ unionParam.parent.currentDs.name }}</p>
-        <union-field-list :field-list="parentField" :union-param="unionParam" />
+        <union-field-list :field-list="parentField" :node="unionParam.parent" @checkedFields="changeParentFields" />
       </div>
       <div class="fields">
         <p>{{ unionParam.node.currentDs.name }}</p>
-        <union-field-list :field-list="nodeField" :union-param="unionParam" />
+        <union-field-list :field-list="nodeField" :node="unionParam.node" @checkedFields="changeNodeFields" />
       </div>
     </div>
     <el-divider />
+    <union-item-edit :parent-field-list="parentField" :node-field-list="nodeField" :union-param="unionParam" />
   </div>
 </template>
 
 <script>
 import { post } from '@/api/dataset/dataset'
 import UnionFieldList from '@/views/dataset/add/union/UnionFieldList'
+import UnionItemEdit from '@/views/dataset/add/union/UnionItemEdit'
 
 export default {
   name: 'UnionEdit',
-  components: { UnionFieldList },
+  components: { UnionItemEdit, UnionFieldList },
   props: {
     unionParam: {
       type: Object,
@@ -52,6 +54,13 @@ export default {
       post('/dataset/field/list/' + this.unionParam.node.currentDs.id, null, true).then(response => {
         this.nodeField = JSON.parse(JSON.stringify(response.data)).filter(ele => ele.extField === 0)
       })
+    },
+
+    changeParentFields(val) {
+      this.unionParam.parent.currentDsField = val
+    },
+    changeNodeFields(val) {
+      this.unionParam.node.currentDsField = val
     }
   }
 }
diff --git a/frontend/src/views/dataset/add/union/UnionFieldList.vue b/frontend/src/views/dataset/add/union/UnionFieldList.vue
index cbafa0cef3..5d8e2ccf73 100644
--- a/frontend/src/views/dataset/add/union/UnionFieldList.vue
+++ b/frontend/src/views/dataset/add/union/UnionFieldList.vue
@@ -52,7 +52,7 @@ export default {
       type: Array,
       required: true
     },
-    unionParam: {
+    node: {
       type: Object,
       required: true
     }
@@ -84,17 +84,23 @@ export default {
   },
   methods: {
     init() {
-      this.checkedFields = this.unionParam.parent.currentDsField
+      this.checkedFields = this.node.currentDsField
       this.handleCheckedCitiesChange(this.checkedFields)
     },
     handleCheckAllChange(val) {
       this.checkedFields = val ? this.fieldList.map(ele => ele.id) : []
       this.isIndeterminate = false
+      this.returnCheckedFields()
     },
     handleCheckedCitiesChange(value) {
       const checkedCount = value.length
       this.checkAll = checkedCount === this.fieldList.length
       this.isIndeterminate = checkedCount > 0 && checkedCount < this.fieldList.length
+      this.returnCheckedFields()
+    },
+
+    returnCheckedFields() {
+      this.$emit('checkedFields', this.checkedFields)
     }
   }
 }
@@ -116,7 +122,7 @@ span{
   padding: 0 0 0 10px;
 }
 .field-block-body{
-  height: 200px;
+  height: 210px;
   overflow-y: auto;
 }
 .field-origin-style{
diff --git a/frontend/src/views/dataset/add/union/UnionItemEdit.vue b/frontend/src/views/dataset/add/union/UnionItemEdit.vue
new file mode 100644
index 0000000000..ad0d23fae4
--- /dev/null
+++ b/frontend/src/views/dataset/add/union/UnionItemEdit.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="container">
+    <div class="union-header">
+      {{ $t('dataset.join_view') }}
+      <div class="union-header-operator">
+        <svg-icon v-if="unionParam.node.unionToParent.unionType === 'left'" icon-class="left-join" class="join-icon" />
+        <svg-icon v-else-if="unionParam.node.unionToParent.unionType === 'right'" icon-class="right-join" class="join-icon" />
+        <svg-icon v-else-if="unionParam.node.unionToParent.unionType === 'inner'" icon-class="inner-join" class="join-icon" />
+        <svg-icon v-else icon-class="no-join" class="join-icon" />
+
+        <el-select v-model="unionParam.node.unionToParent.unionType" size="mini" class="union-selector">
+          <el-option v-for="item in unionOptions" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+
+        <el-button size="mini" icon="el-icon-circle-plus-outline" class="union-add" @click="addUnion">{{ $t('dataset.add_union_field') }}</el-button>
+      </div>
+    </div>
+    <div class="union-body">
+      <div class="union-body-header">
+        <span class="column" :title="unionParam.parent.currentDs.name">{{ unionParam.parent.currentDs.name }}</span>
+        <span class="column" :title="unionParam.node.currentDs.name">{{ unionParam.node.currentDs.name }}</span>
+        <span class="column-last">{{ $t('dataset.operator') }}</span>
+      </div>
+      <div class="union-body-container">
+        <div v-for="(field,index) in unionParam.node.unionToParent.unionFields" :key="index" class="union-body-item">
+          <!--左侧父级field-->
+          <span class="column">
+            <el-select v-model="field.parentField.id" :placeholder="$t('dataset.pls_slc_union_field')" filterable clearable size="mini" class="select-field">
+              <el-option
+                v-for="item in parentFieldList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+                <span>
+                  <span v-if="item.deType === 0">
+                    <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
+                  </span>
+                  <span v-if="item.deType === 1">
+                    <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+                  </span>
+                  <span v-if="item.deType === 2 || item.deType === 3">
+                    <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+                  </span>
+                  <span v-if="item.deType === 5">
+                    <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+                  </span>
+                </span>
+                <span>
+                  {{ item.name }}
+                </span>
+              </el-option>
+            </el-select>
+          </span>
+          <!--右侧孩子field-->
+          <span class="column">
+            <el-select v-model="field.currentField.id" :placeholder="$t('dataset.pls_slc_union_field')" filterable clearable size="mini" class="select-field">
+              <el-option
+                v-for="item in nodeFieldList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+                <span>
+                  <span v-if="item.deType === 0">
+                    <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
+                  </span>
+                  <span v-if="item.deType === 1">
+                    <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+                  </span>
+                  <span v-if="item.deType === 2 || item.deType === 3">
+                    <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+                  </span>
+                  <span v-if="item.deType === 5">
+                    <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+                  </span>
+                </span>
+                <span>
+                  {{ item.name }}
+                </span>
+              </el-option>
+            </el-select>
+          </span>
+
+          <span class="column-last">
+            <el-button :disabled="unionParam.node.unionToParent.unionFields && unionParam.node.unionToParent.unionFields.length === 1" icon="el-icon-delete" circle size="mini" @click="removeUnionItem(index)" />
+          </span>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UnionItemEdit',
+  props: {
+    parentFieldList: {
+      type: Array,
+      required: true
+    },
+    nodeFieldList: {
+      type: Array,
+      required: true
+    },
+    unionParam: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      unionOptions: [
+        { label: this.$t('dataset.left_join'), value: 'left' },
+        { label: this.$t('dataset.right_join'), value: 'right' },
+        { label: this.$t('dataset.inner_join'), value: 'inner' }
+      ]
+    }
+  },
+  watch: {
+
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      if (this.unionParam.node.unionToParent.unionFields.length < 1) {
+        const item = {
+          parentField: {},
+          currentField: {}
+        }
+        this.unionParam.node.unionToParent.unionFields.push(item)
+      }
+    },
+    addUnion() {
+      const item = {
+        parentField: {},
+        currentField: {}
+      }
+      this.unionParam.node.unionToParent.unionFields.push(item)
+    },
+    removeUnionItem(index) {
+      this.unionParam.node.unionToParent.unionFields.splice(index, 1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+span{
+  font-size: 12px;
+}
+.container{
+  height: 275px;
+}
+.union-header{
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+  height: 35px;
+}
+.union-header-operator{
+  display: flex;
+  align-items: center;
+  justify-content: end;
+}
+.union-selector{
+  display: inline-block;
+  width: 100px;
+  margin-left: 6px;
+}
+.union-add{
+  margin-left: 6px;
+}
+.union-body{
+  height: 240px;
+}
+.union-body-header{
+  height: 30px;
+  align-items: center;
+  justify-content: space-between;
+  display: flex;
+}
+.union-body-header .column{
+  width: 240px;
+  display: inline-block;
+  margin-right: 20px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.union-body-header .column-last{
+  width: 40px;
+}
+.union-body-container{
+  height: 180px;
+  overflow-y: auto;
+}
+.select-field{
+  width: 200px;
+  display: inline-block;
+}
+.union-body-item{
+  height: 36px;
+  align-items: center;
+  justify-content: space-between;
+  display: flex;
+}
+.union-body-item .column{
+  width: 240px;
+  display: inline-block;
+  margin-right: 20px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.union-body-item .column-last{
+  width: 40px;
+}
+</style>