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,25 +50,35 @@
       </el-col>
       <el-col :span="16">
         <el-card>
-          <el-form
-            ref="searchFormInstance"
-            :model="searchFormInstance"
-            label-width="80px"
-            inline
-          >
-            <el-form-item
-              label="实例名称:"
-              prop="name"
+          <div class="top-container" style="display: flex;justify-content: space-between">
+            <el-form
+              ref="searchFormInstance"
+              :model="searchFormInstance"
+              label-width="80px"
+              inline
             >
-              <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-form-item>
-          </el-form>
-          <div class="buttons-group margin-bottom-20">
-            <el-button type="primary" icon="el-icon-plus" @click="showAddView">增加实例</el-button>
+              <el-form-item
+                label=""
+                prop="name"
+              >
+                <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">
+              <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">
-      <el-form
-        ref="searchForm"
-        :model="searchForm"
-        label-width="80px"
-        inline
-      >
-        <el-form-item
-          label="模型名称:"
-          prop="name"
+      <div class="search-container">
+        <el-form
+          ref="searchForm"
+          :model="searchForm"
+          label-width="80px"
+          inline
         >
-          <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-form-item>
-      </el-form>
-    </el-card>
-
-    <el-card class="margin-top-20">
-      <div class="buttons-group margin-bottom-20">
-        <el-button type="primary" icon="el-icon-plus" @click="addRow">增加模型</el-button>
+          <el-form-item
+            label=""
+            prop="name"
+          >
+            <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>
+        <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>