主列表使用懒加载方式加载子表数据。
4.1 修改RequirementService服务实现加载子表数据方法 /// <summary> /// 加载需求物资列表 /// </summary> public async Task<object> LoadItems(Guid reqId) { var q = new SqlQuery<Entities.RequireItem>(); q.Where(t => t.ReqId == reqId); q.Include(t => t.Item.Name); q.Include(t => t.Item.Spec); return await q.ToListAsync(); } 4.2 修改RequireList视图 4.2.1 模版 <!-- 省略 --> <el-table-column label="需求物资"> <template slot-scope="scope"> <!-- 物资清单列表 --> <el-popover @show="loadItems(scope.row)" trigger="hover" placement="left"> <el-row v-for="(item,index) in scope.row.Items" :gutter="20"> <el-col :span="2">{{index+1}}.</el-col> <el-col :span="4">{{item.ItemName}}</el-col> <el-col :span="14">{{item.ItemSpec}}</el-col> <el-col :span="4">{{item.Quantity}}</el-col> </el-row> <div slot="reference"> <el-tag size="medium">物资清单</el-tag> </div> </el-popover> </template> </el-table-column> <!-- 省略 --> 4.2.2 脚本 /** 加载需求物资清单 */ loadItems(row: dns.Entities.Requirement) { if (row.Items) { return } dns.Services.RequirementService.LoadItems(row.Id).then(res => { this.$set(row, 'Items', $runtime.parseEntity(res)) }).catch(err => { this.$message.error('加载物资列表失败: ' + err) }) } 4.2.3 预览