getList() { this.loading = true // 结果赋值给this.dataList listDishByPage(this.queryParams).then((response) => { this.dataList = response.data.list this.loading = false this.total = response.data.total } ) }<el-table-column label="编号" align="center" prop="dishNo" /> <el-table-column label="名称" align="center" prop="dishName" /> <el-table-column label="价格" align="center" prop="price" /> <el-table-column label="图片" align="center" prop="fileUrl" /> <el-table-column label="口味" align="center" prop="flavor" /> <el-table-column label="原材料" align="center" prop="ingredients" /> <el-table-column label="烹饪方式" align="center" prop="cookingMethod" />其中后端返回的image为文件名,需要调用selectByFileName,传入image参数,返回fileUrl,要怎么写
时间: 2023-08-20 10:06:02 浏览: 56
你可以在 getList() 方法中,在获取到菜品列表数据后,对每个菜品的 image 字段调用 selectByFileName() 方法,将其替换为返回的 fileUrl,例如:
```
getList() {
this.loading = true;
listDishByPage(this.queryParams).then((response) => {
this.dataList = response.data.list;
this.loading = false;
this.total = response.data.total;
this.dataList.forEach((dish) => {
selectByFileName(dish.image).then((url) => {
dish.fileUrl = url;
});
});
});
}
```
这个方法首先将 loading 状态设为 true,然后调用菜品列表接口,获取菜品列表数据。当数据返回后,将 loading 状态设为 false,并将列表数据和总数分别赋值给 this.dataList 和 this.total。接着,对于每个菜品,都调用 selectByFileName() 方法,将其 image 字段替换为返回的 fileUrl。最后,将处理好的列表数据渲染到 el-table 中。
相关问题
getFamily(id) { this.loading = true; listFamily({ studentId: id, pageNum: 1, pageSize: 99 }).then(response => { this.tableData = response.rows; this.loading = false; }); }, /** 查询招生信息列表 */ getList() { this.loading = true; listInformation(this.queryParams).then(response => { this.informationList = response.rows; this.total = response.total; this.loading = false; }); }, 怎么把this.tableData中的realName的值给this.informationList下的guardian
可以使用循环遍历的方式,将 `this.tableData` 中的 `realName` 值赋给 `this.informationList` 下的 `guardian` 属性。具体实现代码如下:
```
for(let i = 0; i < this.tableData.length; i++) {
this.informationList[i].guardian = this.tableData[i].realName;
}
```
其中,`for` 循环遍历 `this.tableData` 中的每个对象,然后将对应的 `realName` 值赋给 `this.informationList` 中相同位置的对象的 `guardian` 属性。
fetchData() { // this.list = [] this.listLoading = true this.good.pageSize = this.pageSize this.good.pageIndex = this.currentPage4 console.log(this.good.uintPirce) if (this.good.uintPirce === '' || this.good.uintPirce === null) { this.good.uintPirce = 0 } getList(this.good).then(response => { this.list = response.data.records this.total = response.data.total this.pageSize = response.data.size // this.total = response.data.pages this.currentPage4 = response.data.current this.listLoading = false }) },解释以上每一行代码
以下是对您提供的代码片段的逐行解释:
1. `this.listLoading = true`: 将 `listLoading` 属性设置为 `true`,用于显示加载状态。
2. `this.good.pageSize = this.pageSize`: 将 `good` 对象的 `pageSize` 属性设置为当前的 `pageSize` 值。
3. `this.good.pageIndex = this.currentPage4`: 将 `good` 对象的 `pageIndex` 属性设置为当前的 `currentPage4` 值。
4. `console.log(this.good.uintPirce)`: 打印出 `good` 对象的 `uintPirce` 属性的值,用于调试目的。
5. `if (this.good.uintPirce === '' || this.good.uintPirce === null) { ... }`: 如果 `good` 对象的 `uintPirce` 属性为空字符串或者为 `null`,则执行下面的逻辑。
6. `this.good.uintPirce = 0`: 将 `good` 对象的 `uintPirce` 属性设置为 0。
7. `getList(this.good).then(response => { ... })`: 调用一个名为 `getList` 的函数,并将 `good` 对象作为参数传递给它。这个函数可能是获取列表数据的后端接口。
8. `.then(response => { ... })`: 如果获取列表数据成功,则执行回调函数,并将返回的响应作为参数传递给它。
9. `this.list = response.data.records`: 将返回的响应中的 `records` 属性赋值给 `list` 数组,用于显示列表数据。
10. `this.total = response.data.total`: 将返回的响应中的 `total` 属性赋值给 `total` 变量,用于显示总记录数。
11. `this.pageSize = response.data.size`: 将返回的响应中的 `size` 属性赋值给 `pageSize` 变量,用于显示每页记录数。
12. `this.currentPage4 = response.data.current`: 将返回的响应中的 `current` 属性赋值给 `currentPage4` 变量,用于显示当前页码。
13. `this.listLoading = false`: 将 `listLoading` 属性设置为 `false`,用于隐藏加载状态。
希望以上解释能对您有所帮助。如果您还有其他问题,请随时提问!