ダイアログに検索追加

frontend/src/components/AppSelect.vue

@@ -3,7 +3,19 @@
     <div v-if="!isLoaded" class="spinner flex flex-center">
       <q-spinner  color="primary" size="3em" />
     </div>
-    <q-table v-else :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" >
+    <q-table v-else
+      class="app-table"
+      :selection="type"
+      row-key="id"
+      v-model:selected="selected"
+      flat bordered
+      virtual-scroll
+      :columns="columns"
+      :rows="rows"
+      :pagination="pagination"
+      :rows-per-page-options="[0]"
+      :filter="filter"
+    >
       <template v-slot:body-cell-description="props">
           <q-td :props="props">
               <q-scroll-area  class="description-cell">
@@ -23,7 +35,8 @@ export default {
   name: 'AppSelect',
   props: {
     name: String,
-    type: String
+    type: String,
+    filter:String
   },
   setup() {
   const columns = [
@@ -63,7 +76,10 @@ export default {
       columns,
       rows,
       selected: ref([]),
-      isLoaded
+      isLoaded,
+      pagination:ref({
+        rowsPerPage:10
+      })
     }
   },
 
@@ -81,4 +97,8 @@ export default {
   min-height: 300px;
   min-width: 400px;
 }
+.app-table{
+  height: 100%;
+  max-height: 600px;
+}
 </style>