目录

1.首先定义一个整体的div，tableList是此数据关联的所有从数据key列表

2.写一个导航栏切换的js函数

3.写一个进入页面就调用的js函数查询从数据key

4.根据数据格式定义多个表头数组

5.定义一个公共表头数组

6.后端逻辑

使用场景主要是主数据所关联的从数据在es中所包含的map集合key数量不一致

如下图： 点击左侧关联数据右侧列表表头数量不一致（主数据所关联的从数据key为左侧导航栏，右侧为从数据的value，因为value其实就是一个list<map<>>）

思路

前端：点击主数据详情进入详情页面调用接口，此时是没有从数据key的，查询所有关联的从数据，渲染到左侧导航栏中。点击左侧导航栏调用接口传递从数据key查询value且向公用表头中添加此从数据所定义的表头数组（提前定义好或者可以根据数据解析出一个表头）；

后端：一个接口，首先判断是否携带从数据key，如果没有查询此主数据关联的所有从数据key返回给前端。如果携带了key就去查询从数据的value返回给前端；

1.首先定义一个整体的div，tableList是此数据关联的所有从数据key列表

<div class="bottom-table">
  //导航栏
  <div class="table-left">
    //点击左侧数据导航栏触发函数 并且把所点击的item传递给函数
    <div  v-for="item in tableList" class="left-info" @click="aaa(item)">
     {{item.name}}
    </div>
  </div>
  <div class="table-right">
    <div class="right-title-two">
      <span class="title-left"></span>
      <span class="title-right">{{ tableTitle }}</span>
    </div>
    //数据渲染，columns表头列表
    <a-table :columns="columns" :data-source="data"
             :selectedRowKeys="selectedRowKeys" :pagination="pagination">
    </a-table>
  </div>
</div>

2.写一个导航栏切换的js函数查询从数据value

aaa(item) {
  //将左侧点击的数据key给tableTitle赋值展示到列表上方
  this.tableTitle = item.name
  //将主数据跟从数据绑定关系的数据赋值
  let firmwareId = this.$route.params.record.id;
  let param={
    firmwareId:firmwareId,
  }
  //将点击的数据传给接口，查询所有关联数据的时候为空
  param.type = item.name;
  //发送接口请求
  getTableList(param).then(res=>{
    let data = res.data;
    if(data){
      let cwedatas;
	  //将默认的序号表头拿出来赋值给新的表头数组
      let columIndex =  this.columns[0];
      let colum = new Array();
      colum.push(columIndex);
	  //根据返回数据的key映射动态表头加到表头数组当中以及数据存放到data中
      if(item.value == '从数据key'){
        colum.push(...自定义从数据x表头数组);
        let cweData = data;
        let string = cweData.toString();
        cwedatas = JSON.parse("["+string+"]");
      }
      this.columns = colum;
      this.data = cwedatas;
    }
  })
}

3.写一个进入页面就调用的js函数查询从数据key

initTableList(taskId){
  let id = this.$route.params.record.id;
  let param={
    firmwareId:id,
    taskId:taskId
  }
  getTableList(param).then(res=>{
    if(res.data){
      let keys =Object.keys(res.data);
      let scripts = new Array();
      for (let i = 0; i < keys.length; i++) {
        let value = keys[i];
        let script = {name:this.scriptName[value],value:value};
        scripts.push(script);
      }
      this.tableList = scripts;
      this.$nextTick(()=>{
        $(".left-info")[0].click();
      })
    }else{
      let data = "暂无数据";
      this.tableList=[{name:data,value:""}]
      this.tableTitle = data
      let column = this.columns[0];
      this.columns=[];
      this.columns.push(column);
      this.data=[];
      this.pagination.total = 0
    }
  })
}

4.根据数据格式定义多个表头数组

const 从数据x=[
  {
    title: '名称',
    dataIndex: 'name',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '是/否',
    dataIndex: 'is',
    align: 'center',
    ellipsis: true,
    customRender: (text) => {
      return text=="1"?"是":"否";
    },
  }
]

5.定义一个公共表头数组

columns: [{
  title: '序号',
  dataIndex: 'index',
  align: 'center',
  width: 70,
  ellipsis: true,
  customRender: (text, record, index) =>
      `${
          (this.pagination.current - 1) * this.pagination.pageSize +
          (index + 1)
      }`,
}]

6.后端逻辑

public Result aaa(主数据id,从数据key) {
	//查询es...
	//判断是否携带从数据key
	if(StringUtils.isNotBlank(type)){
        //携带从数据key，去查询从数据value
	}else{
		//没有携带从数据key，去查所有关联的从数据
	}
	return Result.ok();
}