el-table动态生成表头 ~~ 看完明白

最新推荐文章于 2024-08-07 00:15:46 发布

xfxTab

最新推荐文章于 2024-08-07 00:15:46 发布

阅读量5.3k

点赞数 6

分类专栏：笔记文章标签： vue elementui

本文链接：https://blog.csdn.net/m0_49578914/article/details/120721490

版权

笔记专栏收录该内容

57 篇文章 6 订阅

订阅专栏

这篇博客介绍了如何处理后台返回的动态表头数据，通过遍历tableColumns和tableData，实现El-Table组件的动态渲染。在Vue.js中，使用v-for指令结合条件判断动态创建表格列，确保只有存在对应字段的数据才会展示在表格中，同时展示了具体的代码实现和实际效果。

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

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

<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 }
],