v-for渲染不确定行列数表格

317 阅读1分钟

当需要实现一个表格组件,需要接收不确定表头数据、不确定行列的多种情况一一对应的数据时,可以这样嵌套

<table>
    <tr>
        <th v-for="title in productQuote.header" :key="title.id">{title}}</th>
    </tr>
    <tr v-for="data in productQuote.data" :key="data.id">
        <td v-for="(li,i) in data" :key="i">{{data[i]}}</td>
    </tr>
</table>

嵌套的v-for不需要更改,就可以实现 对象×数组 四种情况的表格数据渲染:

  • 对象内的对象
  • 对象内的数组
  • 数组内的数组
  • 数组内的对象