优化展示

src/components/feed/RawMaterialTable.vue

@@ -17,12 +17,20 @@
     </div>
 
     <!-- 原料列表 -->
-    <el-table :data="tableData" style="width: 100%" v-loading="loading" row-key="id"
-              :expand-row-keys="expandRowKeys" @expand-change="handleExpandChange">
+    <el-table
+        ref="mainTable"
+        :data="tableData"
+        style="width: 100%"
+        v-loading="loading"
+        row-key="id"
+        :expand-row-keys="expandRowKeys"
+        @expand-change="handleExpandChange"
+        @row-click="handleRowClick"
+    >
       <el-table-column type="expand">
         <template #default="props">
           <div style="padding: 10px 20px;">
-            <h4>营养成分</h4>
+            <h4 style="margin-bottom: 16px;">营养成分</h4>
             <el-table :data="props.row.raw_material_nutrients" border>
               <el-table-column prop="nutrient_name" label="营养名称"></el-table-column>
               <el-table-column prop="value" label="含量"></el-table-column>
@@ -63,6 +71,7 @@ export default {
   name: 'RawMaterialTable',
   emits: ['edit', 'edit-nutrients'], // 声明触发的事件
   setup(props, { emit }) {
+    const mainTable = ref(null); // el-table 的引用
     const tableData = ref([]);
     const loading = ref(false);
     const searchKeyword = ref('');
@@ -135,6 +144,16 @@ export default {
       }
     };
 
+    // 处理行点击事件
+    const handleRowClick = (row, column) => {
+      // 如果点击的是操作列，则不执行任何操作
+      if (column.label === '操作') {
+        return;
+      }
+      // 否则，切换行的展开状态
+      mainTable.value.toggleRowExpansion(row);
+    };
+
     const handleDelete = (row) => {
       ElMessageBox.confirm(
           `确定要删除原料 "${row.name}" 吗？`,
@@ -170,6 +189,7 @@ export default {
     });
 
     return {
+      mainTable, // 暴露出 ref
       tableData,
       loading,
       searchKeyword,
@@ -180,6 +200,7 @@ export default {
       handleSizeChange,
       handleCurrentChange,
       handleExpandChange,
+      handleRowClick, // 暴露出点击处理方法
       handleEdit,
       handleDelete,
       handleEditNutrients,