vue数据绑定的嵌套怎么写? - CNode技术社区

vue的论坛人气不行,只能跑这里来问了 我想自己封装一个grid组件 ’grid’:{ ‘head’:[ { ‘text’:‘姓名’, ‘show’:true, ‘width’:‘100px’, ‘align’:‘center’, ‘keys’:‘name’, }, { ‘text’:‘年龄’, ‘show’:true, ‘width’:‘100px’, ‘align’:‘center’, ‘keys’:‘age’ }, ], ‘rows’:[ {‘name’:‘zhang’,‘age’:‘18’}, {‘name’:‘li’,‘age’:‘19’}, ], } head是grid的表头信息 rows是每一行的信息 通过head的keys值和rows里面的’name’,'age’绑定,大意就是需要这样的数据绑定{{rows[index].{{head[index].keys}}}},在vue中应该怎么写呢

for循环的时候 能拿到index 把head要显示的keys放在一个array里面 循环rows的时候 就能通过index拿到key了

第一种方式:

<table>
 <thead>
 <tr>
 <td v-for="item in grid.head">{{item.text}}</td>
 </tr>
 </thead>
 <tbody>
 <tr v-for="item in grid.rows">
 <td>{{item[grid.head[0].keys]}}</td>
 <td>{{item[grid.head[1].keys]}}</td>
 </tr>
 </tbody>
</table>

第二种方式:

<table>
 <thead>
 <tr>
 <td v-for="item in grid.head">{{item.text}}</td>
 </tr>
 </thead>
 <tbody>
 <tr v-for="item in grid.rows">
 <td v-for="el in grid.head">{{item[el.keys]}}</td>
 </tr>
 </tbody>
</table>

@178220709 嗯

@satrong 都可以用谢谢