vue2遍历数组形成表格？

  • Z时代
  • 2024-02-26
  • 分类：IT

这是我写到table的vue

<table border="1">
      <tr>
        <th rowspan="2">序号</th>
        <th rowspan="2">材料题名</th>
        <th rowspan="3">材料形成时间</th>
        <th rowspan="2">页数</th>
        <th rowspan="2">备注</th>
      </tr>
      <tr>
        <td>年</td>
        <td>月</td>
        <td>日</td>
      </tr>
      <tr v-for="(item,index) in 20" :key="index">
        <td>一</td>
        <td>履历材料</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
[
        {
          label: '材料题名',
          children: [
            {
              label: '目录一',
            },
            {
              label: '目录一',
            }
          ]
        },
        {
          label: '材料题名',
          children: [
            {
              label: '目录一',
              children: [
                {
                  label: '目录1-1'
                }
              ]
            },
            {
              label: '目录一',
            }
          ]
        }
      ]

现在有这么一个数组，children的数量不是固定的，把这个数组里面的内容展示成表格数据
vue2遍历数组形成表格？
children的数据也是每一行数据，大概样子就是上面图片那样
table应该怎么写，各位大佬麻烦了挺急的

回答：

先把 tree 拍平成 arr，然后在 v-for 即可

不然就等用递归组件了，感觉不如直接用 js 递归好数据，然后 v-for

回答：

如果确定只有两层，可以循环template生成

<template v-for="(item,index) in data" :key="item.label">
    <tr v-for="(item,index) in 20" :key="index">
        <td>{{index}}、</td>
        <td>{{item.label}}</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr v-for="(citem,cindex) in item.children" :key="citem.label">
        <td>{{cindex}}、</td>
        <td>{{citem.label}}</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</template>

以上是 vue2遍历数组形成表格？ 的全部内容， 来源链接： utcz.com/p/934989.html

回到顶部