后端传值与前端接收并进行初始化在列表展示的流程

应用场景：该流程适用于从后端获取值后可以在前端像列表一样展示的场景

具体流程：

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();
      },