diff --git a/src/components/feed/NutrientTable.vue b/src/components/feed/NutrientTable.vue index db16d125..c6301487 100644 --- a/src/components/feed/NutrientTable.vue +++ b/src/components/feed/NutrientTable.vue @@ -18,8 +18,20 @@ - - + + + + + @@ -56,6 +68,7 @@ export default { const loading = ref(false); const searchKeyword = ref(''); const searchType = ref('name'); // 默认按营养名称搜索 + const expandRowKeys = ref([]); // 用于控制展开行 const pagination = ref({ page: 1, @@ -104,6 +117,26 @@ export default { fetchNutrients(); }; + // 处理行展开/折叠事件 + const handleExpandChange = async (row, expandedRows) => { + const isExpanded = expandedRows.some(r => r.id === row.id); + // 优化:仅在展开时且数据未加载时才请求 + if (isExpanded && (!row.raw_materials || row.raw_materials.length === 0)) { + try { + const response = await FeedApi.getNutrientById(row.id); + if (response.data) { + const index = tableData.value.findIndex(item => item.id === row.id); + if (index !== -1) { + tableData.value[index].raw_materials = response.data.raw_materials; + } + } + } catch (error) { + console.error('获取营养详情失败:', error); + ElMessage.error('获取营养所含原料失败'); + } + } + }; + const handleEdit = (row) => { emit('edit', row); // 触发 edit 事件,并传递当前行数据 }; @@ -139,10 +172,12 @@ export default { loading, searchKeyword, searchType, + expandRowKeys, pagination, handleSearch, handleSizeChange, handleCurrentChange, + handleExpandChange, handleEdit, handleDelete, fetchNutrients, // 将方法暴露出去