级联接口查询组装表结构数据

表1

接口文件--attend.js

import request from '@/utils/request'

export function attendList(query){
  return request({
    url:'/system/activity/list',
    method:'get',
    params:query
  })
}

export function getTradeByProjectId(id){
  return request({
    url:`/system/project/${id}`,
    method:'get'
  })
}

export function getActivityCountByIds(data){
  return request({
    url:`/system/activity/countByIds`,
    method:'post',
    data
  })
}

方法：new Set去除数组中重复的值，id对应的值以Map的key-value进行存储

页面表元素结构

<el-table v-loading="loading" :data="tableData">
     <el-table-column label="ID" show-overflow-tooltip align="center" prop="id"></el-table-column>
     <el-table-column label="名称" show-overflow-tooltip align="center" width="240" prop="name"></el-table-column>
     <el-table-column label="时间" show-overflow-tooltip align="center" width="180" prop="startTime"></el-table-column>
     <el-table-column label="行业名称" align="center" prop="group"></el-table-column>
     <el-table-column label="主办单位" show-overflow-tooltip align="center" prop="master"></el-table-column>
     <el-table-column label="当地名称" show-overflow-tooltip align="center" width="180" prop="locName"></el-table-column>
     <el-table-column label="地址" show-overflow-tooltip align="center" width="180" prop="locAddr"></el-table-column>
     <el-table-column label="观众数量" align="center" prop="aduienceNum"></el-table-column>
     <el-table-column label="状态" align="center" prop="status">
       <template slot-scope="scope">
         <el-tag :type="scope.row.status===1 ? 'success' : 'danger'">
           {{scope.row.status===1 ? '上架' : '下架'}}
         </el-tag>
       </template>
     </el-table-column>
     <el-table-column label="操作" align="center" min-width="140" fixed="right">
       <template slot-scope="scope">
         <div class="btnGroup">
           <el-link type="primary" :underline="false" @click="handleEdit(scope.row.id)">编辑</el-link>
           <el-link type="danger" :underline="false" @click="handleDelete(scope.row.id)">删除</el-link>
           <el-link :type="scope.row.status===1 ? 'warning' : 'success'" :underline="false" @click="handleStock(scope.row.id)">{{scope.row.status===1 ? '下架' : '上架'}}</el-link>
         </div>
       </template>
     </el-table-column>
   </el-table>

 

组装级联接口请求参数

在级联接口回调函数里以key-value形式存储相应的值

通过数组的map方法组装页面的表结构数据

表2

接口文件--user.js

export function ticketList(query){
  return request({
    url:'/system/ticket/list',
    method:'get',
    params:query
  })
}

export function getActivityListByIds(data){
  return request({
    url:`/system/activity/ids/get`,
    method:'post',
    data
  })
}

export function getUserInfoByIds(data){
  return request({
    url:`/system/wxuser/ids/get`,
    method:'post',
    data
  })
}

注意：提供的为根据ids批量获取的接口，所以在效率上要比表1高，又可以不用考虑循环中不能使用await的问题

页面元素结构

<el-table v-loading="loading" :data="tableData">
      <el-table-column label="序号" width="100" align="center" type="index"></el-table-column>
      <el-table-column label="微信昵称" show-overflow-tooltip width="160" align="center" prop="wxNickName"></el-table-column>
      <el-table-column label="手机号" show-overflow-tooltip width="180" align="center" prop="phone"></el-table-column>
      <el-table-column label="票号" show-overflow-tooltip width="200" align="center" prop="ticketNo"></el-table-column>
      <el-table-column label="行业展览名称" show-overflow-tooltip width="200" align="center" prop="tradeShowName"></el-table-column>
      <el-table-column label="开展时间" show-overflow-tooltip width="180" align="center" prop="tradeShowStartTime"></el-table-column>
      <el-table-column label="地点" show-overflow-tooltip width="180" align="center" prop="locAddr"></el-table-column>
      <el-table-column label="当地名称" show-overflow-tooltip width="120" align="center" prop="locName"></el-table-column>
      <el-table-column label="领取时间" show-overflow-tooltip width="160" align="center" prop="startTime"></el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status===1 ? 'success' : 'danger'">
            {{scope.row.status===1 ? '生效' : '失效'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="100" width="200" fixed="right">
        <template slot-scope="scope">
          <div class="btnGroup">
            <el-link type="primary" :underline="false" @click="handleEdit(scope.row.id)">编辑</el-link>
            <el-link type="danger" :underline="false" @click="handleDelete(scope.row.id)">删除</el-link>
          </div>
        </template>
      </el-table-column>
   </el-table>

组装级联接口请求参数

在级联接口回调函数里以key-value形式存储相应的值

通过数组的map方法组装页面的表结构数据

由于大部分数据都是由级联接口中提供的，所以对于根据活动名称、用户手机号进行查询，主接口是不支持的。为解决用户筛选检索的问题，可以考虑使用数组的filter方法。

表数据应用filter方法，实现模糊查询的功能