div类表格界面搭建

src/App.vue

@@ -33,7 +33,7 @@
             <div>
                 <div style="height: 35px;display: flex;justify-content: flex-start;align-items: center;margin-left: 15px;">
                     <span>动作集合:</span>
-                    <span style="margin-left: 10px;" @click="onBreadcrumb(item)" v-for="item in actionAll" :key="item.kvid">
+                    <span style="margin-left: 10px;" @click="onBreadcrumb(item)" v-for="item in actionAll" :key="item.Kvid">
                         <span id="Breadcrumb" style="color: blue;">{{ item.name }}</span> >
                     </span>
                 </div>
@@ -46,10 +46,10 @@
                     @start="onStart" @end="onEnd" v-if="isChildrenTree == false">
                     <transition-group>
                         <!-- <div class="item" v-for="element in myArray" :key="element.id">{{ element.name }}</div> -->
-                        <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 in treeNode" @click="selectTag(tag)">
                             
                             <div style="display: flex;align-items: center;height: 30px;position: relative;">
-                                <span style="margin-left: 3px;min-width: 20px;">{{ 1+tag.actionName }}</span>
+                                <span style="margin-left: 3px;min-width: 20px;">{{ tag.actionName }}</span>
                                 <img id="closeimg" @click="handleClose(tag)"
                                     style="width: 20px;position: absolute;top: -8px;right: -18px;" src="./assets/close.png">
                             </div>
@@ -59,10 +59,10 @@
                 <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"
+                        <el-tag class="boxtags" :key="item.tagId" v-for="item in childrenTreeNode"
                             @click="selectTag(item)">
                             <div style="display: flex;align-items: center;height: 30px;position: relative;">
-                                <span style="margin-left: 3px;">{{2+ item.actionName }}</span>
+                                <span style="margin-left: 3px;">{{item.actionName }}</span>
                                 <img id="closeimg" @click="handleClose(item)"
                                     style="width: 20px;position: absolute;top: -8px;right: -18px;" src="./assets/close.png">
                             </div>
@@ -117,6 +117,7 @@ export default {
             actionName: '',
             actionType: '',
             dynamicTags: [],
+            winHeight: window.outerHeight,
             isShowAction: false,
             options: [{
                 value: 'select',
@@ -382,6 +383,7 @@ export default {
         },
         // 导航标签
         onBreadcrumb (item) {
+            this.isShowAction=false
             this.actionName = item.actionName
             this.actionType = item.actionType
             this.deleteObjectsAfterKvid(this.actionAll, item.Kvid)
@@ -648,6 +650,9 @@ export default {
             // 拖拽完最终结果
             console.log(this.treeNode)
         },
+        onResize() {
+            this.winHeight = window.outerHeight
+        },
     },
 }
 </script>

src/components/elClick.vue

@@ -84,7 +84,7 @@ export default {
             this.actionConfig.Name = this.actionName
             this.actionConfig.Alias = this.actionType
             this.$emit('dataChanged', this.actionConfig);
-            // console.log(this.actionName)
+
         },
         // 获取页面元素
         selectElement () {

src/main.js

@@ -114,7 +114,7 @@ function generateToolkit () {
     }, 3000);
 }
 
-window.onload = function () {
+// window.onload = function () {
 
     let mousemovebind = false; //如果出现元素默认绑定了mousemove事件导致匹配不到元素的时候，开启第二种模式获得元素
 
@@ -148,5 +148,5 @@ window.onload = function () {
         // 执行其他操作
     });
     generateToolkit();
-}
+// }