element ui动态表头(表头列colums从接口取得)

273 阅读1分钟
<el-table
        :data="topTableData"
        :header-cell-style="{
          'text-align': 'center',
          background: '#B4EEB4',
          color: '#000',
          'font-weight':500
        }"
        :cell-style="{ 'text-align': 'center' }"
        id="bottom_table"
        stripe
        style="font-size: 10px">
         <el-table-column type="index" label="序号" >
             <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
        </el-table-column>
        <el-table-column prop="marketName" label="分局"> </el-table-column>
        <el-table-column prop="batchNumber" label="批次"> </el-table-column>
        <el-table-column prop="unqualifiedNumber" label="不合格批次"></el-table-column>
        <el-table-column label="不合格项目">
        <el-table-column v-for="(item,index) in topTableData[0].listA" :key="index" :label="item.name">
          <template slot-scope="scope1">
            <span>{{scope1.row.listA[index].num}}</span>
          </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="不合格品种">
        <el-table-column v-for="(item,index) in topTableData[0].listB" :key="index" :label="item.name">
          <template slot-scope="scope2">
            <span>{{scope2.row.listB[index].num}}</span>
          </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="不合格公斤数">
            <el-table-column v-for="(item,index) in topTableData[0].listC" :key="index" :label="item.name">
          <template slot-scope="scope3">
            <span>{{scope3.row.listC[index].num}}</span>
          </template>
          </el-table-column>
        </el-table-column>
      </el-table>