优化用户查询表单输入框出现清除按钮体验不友好的问题

src/components/my-select-input/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-input v-model="state.filter.value" class="my-input-with-select" @keyup.enter="onSearch" v-bind="$attrs">
+  <el-input v-model="state.filter.value" class="my-input-with-select" clearable @keyup.enter="onSearch" v-bind="$attrs">
     <template v-if="state.filters.length > 0" #prepend>
       <el-select v-model="state.filter.field" style="width: 100px" @change="onChange">
         <el-option v-for="field in state.filters" :key="field.field" :label="field.description" :value="field.field" />

src/views/admin/user/index.vue

@@ -8,14 +8,20 @@
       </el-col>
       <el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="20">
         <el-card shadow="never" :body-style="{ paddingBottom: '0' }" style="margin-top: 8px">
-          <el-form inline="true" @submit.stop.prevent>
-            <el-form-item>
-              <my-select-input v-model="state.pageInput.dynamicFilter" :filters="state.filters" @search="onQuery" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
-              <el-button v-auth="'api:admin:user:add'" type="primary" icon="ele-Plus" @click="onAdd"> 新增 </el-button>
-            </el-form-item>
+          <el-form @submit.stop.prevent style="max-width: 640px">
+            <el-row :gutter="35">
+              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+                <el-form-item>
+                  <my-select-input v-model="state.pageInput.dynamicFilter" :filters="state.filters" @search="onQuery" />
+                </el-form-item>
+              </el-col>
+              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+                <el-form-item>
+                  <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
+                  <el-button v-auth="'api:admin:user:add'" type="primary" icon="ele-Plus" @click="onAdd"> 新增 </el-button>
+                </el-form-item>
+              </el-col>
+            </el-row>
           </el-form>
         </el-card>