激光测距仪页面开发

src/views/laserRangeFinder/index.vue

@@ -3,6 +3,17 @@
     <div class="searchbox">
       <el-collapse v-model="activeNames">
         <el-collapse-item title="数据筛选" name="1">
+          <template slot="title">
+            <div class="titleLeft">数据筛选</div>
+            <div class="titleRight">
+              <el-button type="primary" @click.stop="onSubmit" size="small">
+                查询
+              </el-button>
+              <el-button type="primary" @click.stop="onSubmit" size="small">
+                导出
+              </el-button>
+            </div>
+          </template>
           <el-form :inline="true" :model="formInline" class="demo-form-inline">
             <el-row :gutter="10">
               <el-col :xs="16" :sm="8" :md="7" :lg="5" :xl="4">
@@ -54,13 +65,6 @@
                   </el-date-picker>
                 </el-form-item>
               </el-col>
-              <el-col :xs="8" :sm="2" :md="4" :lg="1" :xl="2">
-                <el-form-item>
-                  <el-button type="primary" @click="onSubmit" size="small"
-                    >查询</el-button
-                  >
-                </el-form-item>
-              </el-col>
             </el-row>
           </el-form>
         </el-collapse-item>
@@ -91,7 +95,7 @@
               </div>
             </div>
           </el-tab-pane>
-          <el-tab-pane label="拟合图" class="picture">
+          <el-tab-pane label="拟合图">
             <span slot="label">
               <img
                 style="width: 25px; height: 20px; display: inline-block"
@@ -113,7 +117,7 @@
               </div>
             </div>
           </el-tab-pane>
-          <el-tab-pane label="数据列表" class="picture">
+          <el-tab-pane label="数据列表">
             <span slot="label">
               <img
                 style="width: 20px; height: 20px; display: inline-block"
@@ -232,7 +236,9 @@ export default {
     guanbi() {
       this.fourList = [];
     },
-    onSubmit() {},
+    onSubmit() {
+      console.log("事件触发了");
+    },
   },
 };
 </script>
@@ -246,17 +252,6 @@ export default {
   justify-content: space-between;
   .headleft {
     display: flex;
-    .picture {
-      cursor: pointer;
-      display: inline-block;
-      text-align: center;
-      margin: 0 20px;
-      font-size: 12px;
-      img {
-        width: 50px;
-        height: 20px;
-      }
-    }
   }
   .headright {
     img {
@@ -276,6 +271,14 @@ export default {
   .el-select {
     width: 180px;
   }
+
+  .titleLeft {
+  }
+  .titleRight {
+    display: flex;
+    position: absolute;
+    right: 100px;
+  }
 }
 .dialog-actions {
   text-align: right;