update form detail

src/views/data-management/instance-management/index.vue

@@ -10,13 +10,12 @@
             inline
           >
             <el-form-item
-              label="模型名称:"
+              label=""
               prop="name"
             >
-              <el-input v-model="searchForm.name" style="width: 210px" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="el-icon-search" @click="listModel(1)">查询</el-button>
+              <el-input v-model="searchForm.name" clearable placeholder="模型名称" style="width: 100%">
+                <el-button slot="append" icon="el-icon-search" @click="listModel(1)"></el-button>
+              </el-input>
             </el-form-item>
           </el-form>
           <el-table
@@ -51,6 +50,7 @@
       </el-col>
       <el-col :span="16">
         <el-card>
+          <div class="top-container" style="display: flex;justify-content: space-between">
             <el-form
               ref="searchFormInstance"
               :model="searchFormInstance"
@@ -58,18 +58,27 @@
               inline
             >
               <el-form-item
-              label="实例名称:"
+                label=""
                 prop="name"
               >
-              <el-input v-model="searchFormInstance.instanceName" style="width: 210px" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="el-icon-search" @click="listInstance(1)">查询</el-button>
+                <el-input
+                  v-model="searchFormInstance.instanceName"
+                  clearable
+                  placeholder="实例名称"
+                >
+                  <el-button
+                    slot="append"
+                    icon="el-icon-search"
+                    @click="listInstance(1)"
+                  ></el-button>
+                </el-input>
               </el-form-item>
             </el-form>
-          <div class="buttons-group margin-bottom-20">
+            <div class="buttons-group">
               <el-button type="primary" icon="el-icon-plus" @click="showAddView">增加实例</el-button>
             </div>
+          </div>
+
           <el-table
             res="tableInstance"
             :data="tableDataInstance"

src/views/data-management/model-management/index.vue

 <template>
   <div>
     <el-card class="no-bottom">
+      <div class="search-container">
         <el-form
           ref="searchForm"
           :model="searchForm"
@@ -8,23 +9,18 @@
           inline
         >
           <el-form-item
-          label="模型名称:"
+            label=""
             prop="name"
           >
-          <el-input v-model="searchForm.name" />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" icon="el-icon-search" @click="listModel(1)">查询</el-button>
-          <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
+            <el-input v-model="searchForm.name" clearable placeholder="模型名称">
+              <el-button slot="append" icon="el-icon-search" @click="listModel(1)"></el-button>
+            </el-input>
           </el-form-item>
         </el-form>
-    </el-card>
-
-    <el-card class="margin-top-20">
-      <div class="buttons-group margin-bottom-20">
+        <div class="buttons-group">
           <el-button type="primary" icon="el-icon-plus" @click="addRow">增加模型</el-button>
         </div>
-
+      </div>
       <el-table
         :data="tableData"
         border
@@ -51,7 +47,7 @@
       </el-table>
 
       <el-pagination
-        class="margin-top-20 text-align-right"
+        class="margin-top-20 margin-bottom-20 text-align-right"
         :current-page="pageForm.pageNum"
         :page-sizes="[10, 20, 50, 100]"
         :page-size="pageForm.pageSize"
@@ -195,5 +191,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.search-container{
+  display: flex;
+  justify-content: space-between;
+}
 
 </style>