菜单定义，widgetview 挂件视图定义

src/views/ModelMain.vue

@@ -51,19 +51,16 @@
               <div class="section-item-wrap">
                 <div class="title">
                   {{ calcLeftPanel?.title }}
-                  <el-input
-                      v-model="sectionLeftSearch"
-                      style="width: 240px"
-                      placeholder="Search"
-                  >
+                  <el-input v-model="sectionLeftSearch" style="width: 240px" placeholder="Search">
                     <template #prefix>
                       <component :is="renderIcon('element Search')"></component>
                     </template>
                   </el-input>
-                  <span class="close" @click="closeMe('hideLeft')"><component :is="renderIcon('element Close')"></component></span>
+                  <span class="close" @click="closeMe('hideLeft')"><component
+                    :is="renderIcon('element Close')"></component></span>
                 </div>
               </div>
-              <component :is="calcLeftPanel.component" />
+              <component v-if="calcLeftPanel?.component" :is="calcLeftPanel.component" />
             </SplitArea>
             <SplitArea class="section-center" :class="{'hidden-split':hideRight}" :size="calcCenterSize">
               <el-tabs type="card" class="section-tabs">
@@ -115,19 +112,16 @@
               <div class="section-item-wrap">
                 <div class="title">
                   {{ calcRightPanel?.title }}
-                  <el-input
-                      v-model="sectionLeftSearch"
-                      style="width: 240px"
-                      placeholder="Search"
-                  >
+                  <el-input v-model="sectionLeftSearch" style="width: 240px" placeholder="Search">
                     <template #prefix>
                       <component :is="renderIcon('element Search')"></component>
                     </template>
                   </el-input>
-                  <span class="close" @click="closeMe('hideReft')"><component :is="renderIcon('element Close')"></component></span>
+                  <span class="close" @click="closeMe('hideReft')"><component
+                    :is="renderIcon('element Close')"></component></span>
                 </div>
               </div>
-              <component :is="calcRightPanel.component" />
+              <component v-if="calcRightPanel?.component" :is="calcRightPanel.component" />
             </SplitArea>
           </Split>
         </SplitArea>
@@ -135,19 +129,16 @@
           <div class="section-item-wrap">
             <div class="title">
               {{ calcBottomPanel?.title }}
-              <el-input
-                  v-model="sectionLeftSearch"
-                  style="width: 240px"
-                  placeholder="Search"
-              >
+              <el-input v-model="sectionLeftSearch" style="width: 240px" placeholder="Search">
                 <template #prefix>
                   <component :is="renderIcon('element Search')"></component>
                 </template>
               </el-input>
-              <span class="close" @click="closeMe('hideBottom')"><component :is="renderIcon('element Close')"></component></span>
+              <span class="close" @click="closeMe('hideBottom')"><component
+                :is="renderIcon('element Close')"></component></span>
             </div>
           </div>
-          <component :is="calcBottomPanel.component" />
+          <component v-if="calcBottomPanel?.component" :is="calcBottomPanel.component" />
         </SplitArea>
       </Split>
       <div class="btns-toolbar btns-toolbar-right">
@@ -198,7 +189,7 @@ export default {
       sectionLeftTitle: 'modeltree',
       sectionRightTitle: 'property',
       sectionBottomTitle: '',
-      sectionLeftSearch:''
+      sectionLeftSearch: ''
     }
   },
   computed: {
@@ -299,14 +290,14 @@ export default {
         this.sectionBottomTitle = panel.name
       }
     },
-    closeMe(btn){
-      if(btn==='hideLeft'){
+    closeMe(btn) {
+      if (btn === 'hideLeft') {
         this.hideLeft = true
         this.sectionLeftTitle = ''
-      }else if(btn==='hideRight'){
+      } else if (btn === 'hideRight') {
         this.hideRight = true
         this.sectionRightTitle = ''
-      }else if(btn==='hideBottom'){
+      } else if (btn === 'hideBottom') {
         this.hideBottom = true
         this.sectionBottomTitle = ''
       }