业务需求有可能会遇到表头不定的情况:这时候能想到的只能是动态遍历了

<el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
      type="index"
      label="序号"
      align='center'
      width="50">
    </el-table-column>
      <el-table-column
        prop="a1"
        label="姓名"
        align='center'
        sortable
       >
      </el-table-column>
      <el-table-column
        prop="a2"
        label="合计"
        align='center'
        sortable
        :formatter="formatter"
       >
      </el-table-column>
      //关键代码 遍历表头 key的值对应其数据的字段名
      <el-table-column
        v-for="item in tableColumns" :key="item.key"
        :prop="item.key"
        align='center'
        sortable
        :formatter="formatter"
        :label="item.name">
      </el-table-column>
    </el-table>

下面的tableData为后台的返回的数据,tableColumns是我们从后台数据中动态取值的,可通过是否有该字段名来判断是否要push该数据
例如a3对应的一月,故

if(a3) {
this.tableColumns.push({ key: 'a3', name: '一月', width: 250 })
}
//data
tableData: [
   {a1:'老谢',a2:'32000',a3:'33333',a4:'44444',a5:'55555',a6:'666666',a7:'77777',a8:'88888',a9:'99999',a10:'101010',a11:'111111',a12:'121212',a13:'131313',a14:'141414'},
   {a1:'老张',a2:'32000',a3:'33333',a4:'44444',a5:'55555',a6:'666666',a7:'77777',a8:'88888',a9:'99999',a10:'101010',a11:'111111',a12:'121212',a13:'131313',a14:'141414'}
],
tableColumns: [
    { key: 'a3', name: '一月', width: 250 },
    { key: 'a4', name: '二月', minWidth: 120 },
    { key: 'a5', name: '三月', minWidth: 120 },
    { key: 'a6', name: '四月', minWidth: 150 },
    { key: 'a7', name: '五月', minWidth: 150 },
    { key: 'a8', name: '六月', width: 250 },
    { key: 'a9', name: '七月', minWidth: 120 },
    { key: 'a10', name: '八月', minWidth: 120 },
    { key: 'a11', name: '九月', minWidth: 150 },
    { key: 'a12', name: '十月', width: 250 },
    { key: 'a13', name: '十一月', minWidth: 120 },
    { key: 'a14', name: '十二月', minWidth: 120 }
],

效果图:
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐