标签点击切换变色，选中变色

src/App.vue

@@ -49,7 +49,7 @@
                 <div style="margin-bottom: 5px;margin-right: 1px;white-space: wrap;display: flex;width: 88%;">
                     <draggable v-model="treeNode" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd" v-if="isChildrenTree == false">
                         <transition-group>
-                            <el-tag class="boxtags" :key="tag.tagId" v-for="(tag, index) in treeNode" @click="selectTag(tag)">
+                            <el-tag class="boxtags" :key="tag.tagId" v-for="(tag, index) in treeNode" @click="selectTag(tag)" :style="{backgroundColor: tag.Kvid==Kvid?'#68C23A!important':'#409EFF'}">
                                 <div style="display: flex;align-items: center;height: 25px;position: relative;">
                                     <span style="min-width: 40px;display: flex;align-items: center;">
                                         <div class="circle">{{ index + 1 }}</div>
@@ -62,13 +62,13 @@
                     </draggable>
                     <draggable v-model="childrenTreeNode" chosenClass="chosen" forceFallback="true" group="people" animation="1000" @start="onStart" @end="onEnd" v-if="isChildrenTree == true">
                         <transition-group>
-                            <el-tag class="boxtags" :key="item.tagId" v-for="(item, index) in childrenTreeNode" @click="selectTag(item)">
-                                <div style="display: flex;align-items: center;height: 30px;position: relative;">
+                            <el-tag class="boxtags" :key="item.tagId" v-for="(item, index) in childrenTreeNode" @click="selectTag(item)" :style="{backgroundColor: item.Kvid==Kvid?'#68C23A!important':'#409EFF'}">
+                                <div style="display: flex;align-items: center;height: 25px;position: relative;">
                                     <span style="min-width: 40px;display: flex;align-items: center;">
                                         <div class="circle">{{ index + 1 }}</div>
                                         <span style="margin-left: 2px;">{{ item.actionName }}</span>
                                     </span>
-                                    <img id="closeimg" @click="handleClose(item)" style="width: 20px;position: absolute;top: -8px;right: -18px;" src="./assets/close.svg">
+                                    <img id="closeimg" @click="handleClose(item)" style="width: 17px;position: absolute;top: -6px;right: -16px;" src="./assets/close.svg">
                                 </div>
                             </el-tag>
                         </transition-group>
@@ -165,7 +165,7 @@ export default {
             dynamicTagObj: {},
             parentTree: [],
             childrenTreeNode: [],
-            kvid: null,
+            Kvid: null,
             parentKvid: null,
             isChildrenTree: false,
             treeNode: [],
@@ -302,13 +302,14 @@ export default {
             this.dynamicTagObj = {}
             this.actionName = "新建动作"
             this.actionType = ""
-            this.kvid = null
+            this.Kvid = null
             let obj = {}
             obj.taskName = this.taskName
             obj.taskAddress = this.taskAddress
             this.dynamicTagObj.actionName = '新建动作'
             this.dynamicTagObj.actionType = this.actionType
             this.dynamicTagObj.tagId = this.tagId++
+            this.dynamicTagObj.isActive = true
             this.Kvid = Math.floor(Math.random() * 100001);
             this.dynamicTagObj.actionConfigs = this.actionConfigs
             this.dynamicTagObj.Kvid = this.Kvid
@@ -330,6 +331,7 @@ export default {
                 }
                 this.isChildrenTree = false
             }
+            console.log(this.dynamicTagObj)
         },
         // 进入容器
         toActions () {