优化展示

src/components/feed/PigBreedTable.vue

@@ -13,8 +13,16 @@
     </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;">
@@ -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,