การลา ลง เวลา select/input

src/modules/09_leave/components/05_Leave/Tab1.vue

@@ -35,6 +35,7 @@ const querySting = reactive<QuerySting>({
 //** เรียกข้อมูลจาก API*/
 async function fecthLeaveList() {
   leaveStore.rows = [];
+  querySting.keyword = querySting.keyword.trim()
   querySting.status = await (querySting.status == null
     ? "ALL"
     : querySting.status);

src/modules/09_leave/components/05_Leave/Tab2.vue

@@ -37,6 +37,7 @@ const querySting = reactive<QuerySting>({
 //** เรียกข้อมูลจาก API*/
 async function fecthLeaveList() {
   leaveStore.rows = [];
+  querySting.keyword = querySting.keyword.trim()
   querySting.status = await (querySting.status == null
     ? "ALL"
     : querySting.status);

src/modules/09_leave/components/05_Leave/ToolBarLeave.vue

@@ -22,7 +22,6 @@ const props = defineProps({
   getList: Function,
 });
 
-
 /** Option*/
 const optionTypeMain = ref<DataOption[]>([]);
 const optionType = ref<DataOption[]>([]);
@@ -156,6 +155,8 @@ watch(
         emit-value
         map-options
         outlined
+        hide-selected
+        fill-input
         dense
         v-model="querySting.type"
         :options="optionType"
@@ -175,18 +176,15 @@ watch(
           </q-item>
         </template>
         <template
-          v-if="
-            querySting.type !== '00000000-0000-0000-0000-000000000000'
-          "
+          v-if="querySting.type !== '00000000-0000-0000-0000-000000000000'"
           v-slot:append
         >
           <q-icon
             name="cancel"
             @click.stop.prevent="
               (optionType = optionTypeMain),
-                (querySting.type =
-                  '00000000-0000-0000-0000-000000000000'),
-                  props.getSearch?.()
+                (querySting.type = '00000000-0000-0000-0000-000000000000'),
+                props.getSearch?.()
             "
             class="cursor-pointer"
           />
@@ -199,6 +197,8 @@ watch(
         emit-value
         map-options
         outlined
+        hide-selected
+        fill-input
         dense
         v-model="querySting.status"
         :options="optionStatus"
@@ -239,7 +239,11 @@ watch(
         v-model="querySting.keyword"
         label="ค้นหา"
         @keydown.enter.prevent="props.getSearch?.()"
-      />
+      >
+        <template v-slot:append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
     </div>
     <div class="col-xs-12 col-sm-3 col-md-2">
       <q-select
@@ -255,7 +259,6 @@ watch(
         style="min-width: 140px"
         :options="leaveStore.columns"
         option-value="name"
-        
       />
     </div>
   </div>