style

src/views/datasheet_manage/components/MixedTable.vue

@@ -155,14 +155,35 @@
       </table>
 
       <!-- 右键菜单 -->
-      <div class="contextMenu-wrapper" id="contextMenu-wrapper" @mouseleave="hideContextMenu">
+       <!-- @mouseleave="hideContextMenu" -->
+      <div class="contextMenu-wrapper" id="contextMenu-wrapper">
         <div :class="['item',{'deletesty': menu.key==='reset'}]" v-for="menu in config.contextMenuOption" :key="menu.key" @click="handleContext(menu.key)">
-          {{menu.label}}
+          <span v-if="!menu.children">{{menu.label}}</span>
           
-          <i class="el-icon-arrow-right" v-if="menu.children"></i>
+          <!-- <i class="el-icon-arrow-right" v-if="menu.children"></i> -->
+          <el-collapse v-model="activeNames" @change="handleChange" v-if="menu.children">
+            <el-collapse-item name="1">
+              <template slot="title">
+                 {{menu.label}}
+              </template>
+              
+              <div class="subMenu-wrapper">
+                <div slot="reference" class="item" v-for="submenu in menu.children" :key="submenu.key" @click="edbCalculateInsertOpen(submenu)">
+                    <el-popover
+                      width="300"
+                      trigger="hover"
+                      placement="right"
+                    >
+                      <div v-html="formulaTip.get(submenu.fromEdbKey)"></div>
+                      <div slot="reference" style="width:100%">{{submenu.label}}</div>   
+                    </el-popover>
+                </div>
+              </div>
+            </el-collapse-item>
+          </el-collapse>  
 
           <!-- 二级菜单 -->
-          <div class="subMenu-wrapper" v-if="menu.children">
+          <!-- <div class="subMenu-wrapper" v-if="menu.children">
             <div slot="reference" class="item" v-for="submenu in menu.children" :key="submenu.key" @click="edbCalculateInsertOpen(submenu)">
                 <el-popover
                   width="300"
@@ -173,7 +194,7 @@
                   <div slot="reference" style="width:100%">{{submenu.label}}</div>   
                 </el-popover>
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
     </template>
@@ -1337,6 +1358,9 @@ export default {
     left: -9999px;
     background: #fff;
     padding: 10px 0;
+    min-width: 180px;
+    max-height: 400px;
+    overflow-y: auto;
     /* border: 1px solid #999; */
     box-shadow: 0 1px 4px #999;
     .item {
@@ -1352,15 +1376,20 @@ export default {
 
     .subMenu-wrapper {
       width: 180px;
-      display: none;
+      /* display: none; */
       padding: 10px 0;
-      box-shadow: 0 1px 4px #999;
-      background: #fff;
-      position: absolute;
+      /* box-shadow: 0 1px 4px #999; */
+      /* background: #fff; */
+      /* position: absolute;
       right: -178px;
       top:-205px;
       max-height: 400px;
-      overflow-y: auto;
+      overflow-y: auto; */
+      .item {
+        &:hover {
+          background: #fff;
+        }
+      }
     }
   }
 }
@@ -1392,4 +1421,18 @@ export default {
     }
   }
 }
+.el-collapse {
+  border: none !important;
+  .el-collapse-item__header {
+    margin-bottom: 0 !important;
+    background: transparent !important;
+  }
+  .el-collapse-item__wrap {
+    background: transparent !important;
+    border: none !important;
+  }
+  .el-collapse-item__content {
+    padding: 0 !important;
+  }
+}
 </style>