el-table循环问题?

作者站长头像
站长
· 阅读数 10

如果后台传过来的数据是[{...},{...}],但是数组对象里的key和value都不是固定的,不能item.来取值,需要动态内容和表头,这种可以循环出来嘛,谢谢

回复
1个回答
avatar
test
2024-07-15

可以通过 v-for 去循环 <el-table-column> 元素来实现这个效果。比如说我这样:

<template v-for="termData in rootTermData.child">
  <h3 :key="termData.key">{{ termData.label }}</h3>
  <el-table :key="termData.key" :data="termData.data" border>
    <el-table-column
      v-for="(column, index) in termData.column"
      :key="column.key"
      :label="column.name"
      :prop="column.key"
      :align="!!index ? 'center' : 'left'"
    />
  </el-table>
</template>

我这边是连 <el-table> 元素数量都是不确定的所以就一起循环了。

只不过你需要提前把表头数据给全部组装出来。后端返回的时候不一定会愿意帮你组装好。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容