应用场景:该流程适用于从后端获取值后可以在前端像列表一样展示的场景
具体流程:
1、后端操作:返回集合参数
@PostMapping("/getTaskDetailArea3Data")//此方法可以返回一个List集合到前端
public ResultMessage<List<TaskDetailsVo3>> getTaskDetailArea3Data( String id){
System.err.println("获取区域3数据的方法执行了"+id);
return ResultUtil.data(taskDetailsService.getTaskDetailArea3DataService(id););
}
2、前端操作:
(1)、在1.js中设置后端接口的API
// 统一请求路径前缀在libs/axios.js中修改
import {
getRequest,
putRequest,
postRequest,
deleteRequest,
} from "@/libs/axios";
// 测试
export const testTask = (params) => {
return deleteRequest(`/getTaskDetailArea3Data`,params);
};
(2)、在1.vue的script标签中导入1.js
import * as API_Test from "@/api/1.js";
(3)、在1.vue的script标签中调用API方法
//获取区域3的数据
getTaskDetailArea3InfoData(){
this.loading = true;
this.pointSearchForm.taskId = this.id
// ,this.pointSearchFor
API_Task.getTaskDetailArea3Data(this.pointSearchForm).then((res) => {
console.log('[获取区域3的数据]',res)
this.area3Data = res.result;//赋值返回值内容到area3Data中,area3Data: [],用来存储后端传入的数据
this.loading = false;
if (res.success) {
this.pointTotal = res.result.total;
}
});
this.loading = false;
}
(4)、在1.vue的script标签中设置表格的展示格式
area3Columns:[
{
title: "任务名",
key: "taskName",
tooltip: true
},
{
title: "用户名",
key: "username",
tooltip: true
}
],
(5)、在1.vue的template标签中设置表格并进行格式与数据绑定
<Table
:loading="loading"
border
:columns="area3Columns"//格式绑定
:data="area3Data"//数据绑定
class="mt_10"
ref="table"
>
</Table>
(6)、在1.vue的script标签中初始化执行代码
init() {
//调用查询方法
this.getTaskDetailArea3InfoData();
},