element-ui实现复杂动态表头

1.需求场景

制作一个不同省份不同业务的的统计报表。如下图:
element-ui实现复杂动态表头_第1张图片

2.遇到的问题

动态表头只需要在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>

你可能感兴趣的:(vue,vue.js,前端)