element-ui实现复杂动态表头

最新推荐文章于 2024-08-15 16:23:44 发布

晚来听雨雪

最新推荐文章于 2024-08-15 16:23:44 发布

阅读量1.2k

点赞数 2

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/QT1218/article/details/107844562

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.需求场景

制作一个不同省份不同业务的的统计报表。如下图：
在这里插入图片描述

2.遇到的问题

动态表头只需要在<el-table-column>中v-for循环即可，但是在多层循环中，prop属性的赋值却让我试了半天，希望能帮到有需要的小伙伴，最终代码如下：

<el-table :data="dataList" width="1200"  show-summary   :summary-method="getSummaries" v-if="dataList.length !== 0" max-height="550">
      <el-table-column align="center" label="全国省份统计">
        <el-table-column align="center" label="省份" prop="provinceName"></el-table-column>
        <el-table-column align="center" :label="brand.brandName" v-for="(brand,bIndex) in dataList[0].brandList"
                         :key="bIndex">
          <el-table-column align="center" :label="business.busiName" v-for="(business,cIndex) in brand.busiList"
                           :key="cIndex">
            <el-table-column align="center" label="线上">
              <el-table-column align="center" label="a"
                               :prop="'brandList.'+bIndex+'.busiList.'+cIndex+'.onLineActiviTotal'"></el-table-column>
            <el-table-column align="center" label="线下">
            </el-table-column>
            <el-table-column align="center" label="b"
                             :prop="'brandList.'+bIndex+'.busiList.'+cIndex+'.total'"></el-table-column>
          </el-table-column>
        </el-table-column>

      </el-table-column>
    </el-table>