crfix

AventailLtd · Jul 5, 2024 · 312e2ba · 312e2ba
1 parent 9c4921a
commit 312e2ba
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/dev/App.vue b/dev/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <table-base :items="items" :fields="fields" :order-by="orderBy" @orderChanged="orderChanged" @rowClicked="onRowClicked">
+    <table-base :items="getItems()" :fields="fields" :order-by="orderBy" @orderChanged="orderChanged" @rowClicked="onRowClicked">
       <template #sortIconAsc>
         <small>
           (active asc)
@@ -32,8 +32,8 @@
           {{ data.value}}
         </div>
       </template>
-      <template #row-details="data">
-        <div v-if="data.row.id === 1" class="row-details">
+      <template #row-details>
+        <div class="row-details">
           Row details
           <textarea class="w-100"/>
         </div>
@@ -105,7 +105,15 @@ export default defineComponent({
 
     onRowClicked(item) {
       this.clickedRow = item
-    }
+    },
+
+    getItems() {
+      // add row details extra row after the first row
+      return this.items.map(item => {
+        item._showRowDetails = item.id === 1;
+        return item
+      })
+    },
   }
 })
 </script>

diff --git a/src/components/table-base/TableBase.vue b/src/components/table-base/TableBase.vue
@@ -56,7 +56,7 @@
             </td>
           </template>
         </tr>
-        <tr class="row-details">
+        <tr v-if="item._showRowDetails">
           <td :colspan="fields.length">
             <slot name="row-details" :row="item" />
           </td>
@@ -132,7 +132,7 @@ export default {
     activeOrderByClass: {
       type: String,
       default: null,
-    }
+    },
   },
   data() {
     return {