version with backend

frontend/src/components/dialog/DetailFieldTable.vue

@@ -6,13 +6,21 @@
     <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" style="max-height: 65vh;" @update:selected="emitSelected">
-      <template v-slot:[`body-cell-${detailField}`]="props">
+
+      <template v-for="col in columns" :key="col.name" v-slot:[`body-cell-${col.name}`]="props">
         <q-td :props="props">
-          <q-scroll-area class="description-cell">
+          <!-- 使用动态插槽名称 -->
+          <slot v-if="col.name !== detailField" :name="`body-cell-${col.name}`" :row="props.row" :column="props.col">
+            <!-- 默认内容 -->
+            <span>{{ props.row[col.name] }}</span>
+          </slot>
+          <q-scroll-area v-else class="description-cell">
             <div v-html="props.row[detailField]"></div>
           </q-scroll-area>
         </q-td>
       </template>
+
+      
     </q-table>
   </div>
 </template>
@@ -41,6 +49,14 @@ export default {
     fetchData: {
       type: Function as PropType<() => Promise<IRow[]>>,
       required: true
+    },
+    sortBy: {
+      type: String,
+      required: false
+    },
+    sortDesc: {
+      type: Boolean,
+      required: false
     }
   },
   emits: ['update:selected'],
@@ -64,6 +80,8 @@ export default {
       selected,
       isLoaded,
       pagination: ref({
+        sortBy: props.sortBy || undefined,
+        descending: props.sortDesc || undefined,
         rowsPerPage: 10
       }),
       emitSelected