filter ==> ข้อมูลตำแหน่งข้าราชการ ฯ

src/modules/01_metadata/components/position/03_Executive.vue

@@ -12,10 +12,12 @@ import type { RowListForm } from "@/modules/01_metadata/interface/request/positi
 import DialogAdd from "@/modules/01_metadata/components/position/DialogFormExecutive.vue";
 
 const $q = useQuasar();
-const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
 
 // Table
 const rows = ref<RowListForm[]>([]); // รายากรข้อมูลตำแหน่งทางการบริหาร
+const rowsMain = ref<RowListForm[]>([]); // รายากรข้อมูลตำแหน่งทางการบริหาร
 const filterKeyword = ref<string>(""); // คำค้นหา
 const visibleColumns = ref<string[]>([
   "no",
@@ -104,6 +106,7 @@ async function getData() {
     .then(async (res) => {
       const data = await res.data.result;
       rows.value = data;
+      rowsMain.value = data;
     })
     .catch((e) => {
       messageError($q, e);
@@ -130,6 +133,14 @@ function editPopUp(data: RowListForm) {
   isEdit.value = true;
 }
 
+function serchDataTable() {
+  rows.value = onSearchDataTable(
+    filterKeyword.value,
+    rowsMain.value,
+    columns.value ? columns.value : []
+  );
+}
+
 /**
  * hook ทำงานเมื่อ Components ถูกเรียกใช้งาน
  */
@@ -157,12 +168,11 @@ onMounted(async () => {
     <q-input
       dense
       outlined
-      clearable
       v-model="filterKeyword"
       placeholder="ค้นหา"
-      @clear="filterKeyword = ''"
+      @keydown.enter.pervent="serchDataTable"
     >
-      <template v-slot:append v-if="filterKeyword === ''">
+      <template v-slot:append>
         <q-icon name="search" />
       </template>
     </q-input>
@@ -185,7 +195,6 @@ onMounted(async () => {
       ref="table"
       :columns="columns"
       :rows="rows"
-      :filter="filterKeyword"
       row-key="id"
       flat
       bordered