vue2 渲染一个table中一行数据中某个字段中的数组的每一项
时间: 2024-03-15 13:47:58 浏览: 226
Vue.js实现表格渲染的方法
5星 · 资源好评率100%
可以使用 Vue 的模板语法和数组的遍历方法来实现。
假设你有一个名为 `items` 的数组,其中每个元素都有一个名为 `data` 的属性,它是一个数组。你可以使用 `v-for` 指令来遍历 `items`,然后使用 `v-for` 指令再次遍历 `data`,将其中的每个元素展示在表格中。
具体实现方式如下:
```html
<table>
<thead>
<tr>
<th>Name</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items">
<td>{{ item.name }}</td>
<td>
<ul>
<li v-for="datum in item.data">{{ datum }}</li>
</ul>
</td>
</tr>
</tbody>
</table>
```
在上面的代码中,我们使用了两个 `v-for` 指令,第一个指令遍历 `items` 数组,第二个指令遍历 `item.data` 数组,将其中的每个元素展示在一个无序列表中。你可以根据自己的需求修改模板中的代码。
阅读全文