优化展示

src/components/feed/NutrientTable.vue

@@ -18,12 +18,20 @@
     </div>
 
     <!-- 营养列表 -->
-    <el-table :data="tableData" style="width: 100%" v-loading="loading" row-key="id"
+    <el-table
-              :expand-row-keys="expandRowKeys" @expand-change="handleExpandChange">
+        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_materials" border>
               <el-table-column prop="name" label="原料名称"></el-table-column>
               <el-table-column prop="value" label="含量"></el-table-column>
@@ -64,6 +72,7 @@ export default {
   name: 'NutrientTable',
   emits: ['edit'], // 声明触发的事件
   setup(props, { emit }) {
+    const mainTable = ref(null); // el-table 的引用
     const tableData = ref([]);
     const loading = ref(false);
     const searchKeyword = ref('');
@@ -137,6 +146,16 @@ export default {
       }
     };
 
+    // 处理行点击事件
+    const handleRowClick = (row, column) => {
+      // 如果点击的是操作列，则不执行任何操作
+      if (column.label === '操作') {
+        return;
+      }
+      // 否则，切换行的展开状态
+      mainTable.value.toggleRowExpansion(row);
+    };
+
     const handleEdit = (row) => {
       emit('edit', row); // 触发 edit 事件，并传递当前行数据
     };
@@ -168,6 +187,7 @@ export default {
     });
 
     return {
+      mainTable, // 暴露出 ref
       tableData,
       loading,
       searchKeyword,
@@ -178,6 +198,7 @@ export default {
       handleSizeChange,
       handleCurrentChange,
       handleExpandChange,
+      handleRowClick, // 暴露出点击处理方法
       handleEdit,
       handleDelete,
       fetchNutrients, // 将方法暴露出去

src/components/feed/PigAgeStageTable.vue

@@ -13,12 +13,20 @@
     </div>
 
     <!-- 年龄阶段列表 -->
-    <el-table :data="tableData" style="width: 100%" v-loading="loading" row-key="id"
+    <el-table
-              :expand-row-keys="expandRowKeys" @expand-change="handleExpandChange">
+        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.pig_types" border>
               <el-table-column prop="breed_name" label="品种"></el-table-column>
               <el-table-column prop="description" label="描述"></el-table-column>
@@ -89,6 +97,7 @@ export default {
     PigNutrientRequirementsDisplay, // 注册组件
   },
   setup(props, { emit }) {
+    const mainTable = ref(null); // el-table 的引用
     const tableData = ref([]);
     const loading = ref(false);
     const searchKeyword = ref('');
@@ -170,6 +179,16 @@ export default {
       }
     };
 
+    // 处理行点击事件
+    const handleRowClick = (row, column) => {
+      // 如果点击的是操作列，则不执行任何操作
+      if (column.label === '操作') {
+        return;
+      }
+      // 否则，切换行的展开状态
+      mainTable.value.toggleRowExpansion(row);
+    };
+
     // 将克转换为公斤并格式化，只返回数值
     const weightFormatter = (row, column, cellValue) => {
       if (typeof cellValue === 'number') {
@@ -217,6 +236,7 @@ export default {
     });
 
     return {
+      mainTable, // 暴露出 ref
       tableData,
       loading,
       searchKeyword,
@@ -230,6 +250,7 @@ export default {
       handleSizeChange,
       handleCurrentChange,
       handleExpandChange,
+      handleRowClick, // 暴露出点击处理方法
       weightFormatter, // 暴露给模板
       handleViewNutrientRequirements, // 暴露给模板
       handleEdit,

src/components/feed/PigBreedTable.vue

@@ -13,8 +13,16 @@
     </div>
 
     <!-- 品种列表 -->
-    <el-table :data="tableData" style="width: 100%" v-loading="loading" row-key="id"
+    <el-table
-              :expand-row-keys="expandRowKeys" @expand-change="handleExpandChange">
+        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;">
@@ -45,7 +53,7 @@
             <el-divider></el-divider>
 
             <!-- 下半段：该品种下的年龄阶段简介 -->
-            <h4>该品种下的年龄阶段简介</h4>
+            <h4 style="margin-bottom: 16px;">该品种下的年龄阶段简介</h4>
             <el-table
               :data="props.row.pig_types"
               border
@@ -120,6 +128,7 @@ export default {
     PigNutrientRequirementsDisplay, // 注册组件
   },
   setup(props, { emit }) {
+    const mainTable = ref(null); // el-table 的引用
     const tableData = ref([]);
     const loading = ref(false);
     const searchKeyword = ref('');
@@ -203,6 +212,16 @@ export default {
       }
     };
 
+    // 处理行点击事件
+    const handleRowClick = (row, column) => {
+      // 如果点击的是操作列，则不执行任何操作
+      if (column.label === '操作') {
+        return;
+      }
+      // 否则，切换行的展开状态
+      mainTable.value.toggleRowExpansion(row);
+    };
+
     // 将克转换为公斤并格式化，只返回数值
     const weightFormatter = (row, column, cellValue) => {
       if (typeof cellValue === 'number') {
@@ -250,6 +269,7 @@ export default {
     });
 
     return {
+      mainTable, // 暴露出 ref
       tableData,
       loading,
       searchKeyword,
@@ -263,6 +283,7 @@ export default {
       handleSizeChange,
       handleCurrentChange,
       handleExpandChange,
+      handleRowClick, // 暴露出点击处理方法
       weightFormatter, // 暴露给模板
       handleViewNutrientRequirements, // 暴露给模板
       handleEdit,

src/components/feed/RawMaterialTable.vue

@@ -17,12 +17,20 @@
     </div>
 
     <!-- 原料列表 -->
-    <el-table :data="tableData" style="width: 100%" v-loading="loading" row-key="id"
+    <el-table
-              :expand-row-keys="expandRowKeys" @expand-change="handleExpandChange">
+        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,