el-table表格——动态表头 (前后端)

最新推荐文章于 2024-06-04 12:00:19 发布

IT周小白

最新推荐文章于 2024-06-04 12:00:19 发布

阅读量628

点赞数 3

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/zhoulijia666/article/details/137767071

版权

文章描述了如何在前端使用Vue.js的ElementUI库实现一个表格，根据主表数据动态显示子表内容。通过`v-for`遍历`headList`和`tableData`，实现在点击事件中更新子表数据的行为。

摘要由CSDN通过智能技术生成

背景：根据主表的数据点动态展示子表数据，并且列为动态。

前端

数据结构

headList:[
   {
     name: "202401",
     house: "01",
   },
   {
     name: "202402",
     house: "02",
   },
   {
     name: "20243",
     house: "03",
   }
 ],
 tableData:[
   {
     '202401':1,
     '202402':2,
     '202403':3
   },
   {
     '202401':4,
     '202402':5,
     '202403':6
   },
   {
     '202401':7,
     '202402':8,
     '202403':9
   }
 ]

Table 部分

       <el-card class="box-card">
        <el-table v-loading="loading" :data="hpvDateS"  stripe="stripe">
            <template v-for="(item, index) in headListS">
              <el-table-column
                :key="index"
                :prop="item.name"
                :label="item.house"
                align="center"
              ></el-table-column>
            </template>
        </el-table>
        </el-card>

data() 定义

      headListS: [],
      hpvListS: null,
      headDateS: [],
      hpvDateS: [],

查询接收

      this.headDateS = response.dto.headList;
      this.hpvListS = response.dto.hpvData;

单击事件

clickRow(row) {
      this.headListS=[]
      this.hpvDateS=[]
        this.headListS = this.headDateS[row.tmh];
        this.hpvDateS = this.hpvListS[row.tmh];
    },

后端

    public static void main(String[] args) {
        List<TctHpv> tctHpvs = new ArrayList<>();
        TctHpv tctHpv1 = new TctHpv();
        tctHpv1.setTmh("1111");
        tctHpvs.add(tctHpv1);
        TctHpv tctHpv2 = new TctHpv();
        tctHpv2.setTmh("2222");
        tctHpvs.add(tctHpv2);

        List<ReturnForm> hpvs = new ArrayList<>();
        ReturnForm tctHpv3 = new ReturnForm();
        tctHpv3.setTmh("1111");
        tctHpv3.setHpvxmmc("名称 1111");
        tctHpv3.setHpvjcjg("结果 1111");
        hpvs.add(tctHpv3);
        ReturnForm tctHpv4 = new ReturnForm();
        tctHpv4.setTmh("1111");
        tctHpv4.setHpvxmmc("名称 2222");
        tctHpv4.setHpvjcjg("结果 2222");
        hpvs.add(tctHpv4);

        ReturnForm tctHpv5 = new ReturnForm();
        tctHpv5.setTmh("2222");
        tctHpv5.setHpvxmmc("名称 3333");
        tctHpv5.setHpvjcjg("结果 3333");
        hpvs.add(tctHpv5);
        ReturnForm tctHpv6 = new ReturnForm();
        tctHpv6.setTmh("2222");
        tctHpv6.setHpvxmmc("名称 3333");
        tctHpv6.setHpvjcjg("结果 3333");
        hpvs.add(tctHpv6);



        //最外层
        Map<String,List<Map<String,String>>> headList = new HashMap<>();
        Map<String,List<Map<String,String>>> hpvData = new HashMap<>();

        int sum2 = 1;
        for (TctHpv tctHpv : tctHpvs) {

            List<Map<String,String>>  headList2 = new ArrayList<>();
            List<Map<String,String>>  hpvData2 = new ArrayList<>();
            Map<String,String>  hpvData22 = new HashMap<>();
            for (ReturnForm hpv : hpvs) {

                if (hpv.getTmh().equals(tctHpv.getTmh())){
                    for (int i = 0; i < 2; i++) {
                        Map<String,String>  headMap = new HashMap<>();
                        headMap.put("name",String.valueOf(sum2));
                        if (i == 0){
                            headMap.put("house","HPV项目名称");
                            hpvData22.put(String.valueOf(sum2),hpv.getHpvxmmc());
                        }else {
                            headMap.put("house","HPV检测结果");
                            hpvData22.put(String.valueOf(sum2),hpv.getHpvjcjg());
                        }
                        headList2.add(headMap);
                        sum2 ++;
                    }

                }

            }
            hpvData2.add(hpvData22);
            headList.put(tctHpv.getTmh(),headList2);
            hpvData.put(tctHpv.getTmh(),hpvData2);
        }


        System.out.println(headList);

    }