实现添加一个标签组合删除一个标签组的功能

src/view/memberGroup/memberGroupEdit.vue

@@ -10,24 +10,27 @@
                 已选标签
                 <span class="color-c0c4cc font-14">（同一个输入框内标签关系为且）</span>
               </div>
-              <div class="memberGroupEdit-wrap__tags w-548 border-box">
-                <el-dropdown class="memberGroupEdit-wrap__dropdown">
-                  <i class="el-icon-more"></i>
-                  <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item @click.native="showAddTag">添加标签</el-dropdown-item>
-                    <el-dropdown-item>删除标签</el-dropdown-item>
-                  </el-dropdown-menu>
-                </el-dropdown>
-                <div class="memberGroupEdit-wrap__tags-box">
-                  <div class="memberGroupEdit-wrap__tagcell" v-for="(item, index) in selectedTagData" :key="index">
-                    <span>{{ item.tagName }}</span>
-                    <span class="memberGroupEdit-wrap__tag-name">【选择:{{ item.newTagVal }}】</span>
-                    <i class="el-icon-edit" @click="editSelTag(index, item)"></i>
-                    <i class="el-icon-delete" @click="delSelTag(index, item)"></i>
+              <div class="w-548 border-box" v-for="(tagsGroup, tagsGroupIndex) in selectedTagData" :key="tagsGroupIndex">
+                <div class="memberGroupEdit-wrap__tags">
+                  <el-dropdown class="memberGroupEdit-wrap__dropdown">
+                    <i class="el-icon-more"></i>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item @click.native="showAddTag">添加标签</el-dropdown-item>
+                      <el-dropdown-item @click.native="delTagsGroup(tagsGroupIndex)">删除</el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                  <div class="memberGroupEdit-wrap__tags-box">
+                    <div class="memberGroupEdit-wrap__tagcell" v-for="(item, index) in tagsGroup" :key="index">
+                      <span>{{ item.tagName }}</span>
+                      <span class="memberGroupEdit-wrap__tag-name">【选择:{{ item.newTagVal }}】</span>
+                      <i class="el-icon-edit" @click="editSelTag(index, item)"></i>
+                      <i class="el-icon-delete" @click="delSelTag(index, item)"></i>
+                    </div>
                   </div>
                 </div>
+                <el-button v-show="(tagsGroupIndex === 0 && selectedTagData.length >= 2) || (tagsGroupIndex === 1 && selectedTagData.length >= 3)" type="text" @click="changeTagsRelation">剔除</el-button>
               </div>
-              <el-button class="m-t-10 w-548 el-icon-plus color-blue">&nbsp;&nbsp;添加</el-button>
+              <el-button class="m-t-10 w-548 el-icon-plus color-blue" v-show="selectedTagData.length < 3" @click="addTgsGroup">&nbsp;&nbsp;添加</el-button>
             </el-form-item>
             <el-form-item label="" prop="groupName" class="w-220">
               <div>分组名称</div>
@@ -86,7 +89,7 @@
       ref="addTagViewComponent"
       :delTagId="delTagId"
       :addTagShow.sync="showTagFlag"
-      :selTagData="selectedTagData"
+      :selTagData="selectedTagsGroup"
       :returnEditObj="returnEditObj"
       @showTabActive="showTabActive"
       @showShortDetail="showShortDetail"
@@ -101,7 +104,9 @@
 
 <script>
 // TODO 点击添加按添加标签组的功能
-// TODO 选中的标签组展示框
+/**
+ * 点击添加标签按钮，将选中的标签数据保存到一个数组中，当弹出层关闭时，将选中的标签赋值给selectedTagData
+ * */
 import navCrumb from '@/components/nav/nav.vue';
 import addTagView from '@/components/addTagView.vue';
 import tagShortDetail from '@/components/tagShortDetail.vue';
@@ -183,15 +188,19 @@ export default {
 
       // 已选标签数据
       selectedTagData: [
-        // {
-        //   tagId: 1,
-        //   tagName: '有车一族',
-        //   tagValue: '233',
-        //   newTagVal: ''
-        //   tagParams: '',
-        //   isActive: 0,
-        // },
+        [
+          // {
+          //   tagId: 1,
+          //   tagName: '有车一族',
+          //   tagValue: '233',
+          //   newTagVal: ''
+          //   tagParams: '',
+          //   isActive: 0,
+          // },
+        ]
       ],
+      // 选中的一组标签数据
+      selectedTagsGroup: [],
 
       rowItemData: {}, //选择的标签的数据
       showTagDetail: false, // 标签详情缩小版显示/隐藏
@@ -245,6 +254,28 @@ export default {
     },
 
     /**
+     * 点击添加按钮，添加一个标签组
+     * */
+    addTgsGroup() {
+      this.selectedTagData.length < 3 && this.selectedTagData.push([]);
+    },
+
+    /**
+     * 点击删除按钮，删除一个标签组
+     * */
+    delTagsGroup(index) {
+      console.log(index);
+      this.selectedTagData.splice(index, 1);
+    },
+
+    /**
+     * 切换两个标签组之间的关系
+     * */
+    changeTagsRelation() {
+      alert('改变标签组之间的关系（剔除、或者）');
+    },
+
+    /**
      * 点击输入框
      */
     focus(name, num) {
@@ -717,6 +748,7 @@ export default {
   position: relative;
   padding: 12px 0;
   border: 1px solid #dcdfe6;
+  border-left: 10px solid #1890ff;
   border-radius: 4px;
 
   .memberGroupEdit-wrap__tags-box {