vue 在table中使用v-for，每行固定个数换行


vue 在table中使用v-for，每行固定个数换行

废话不多说，看代码：

1
2
3
4
5
6
7
8
9
<table border="1" width="100%">
    <tr v-for="(item,index) in goodsList" :key="index"
        :style="{'display': index%5==0 ? '':'none'}">
        <td v-for="i in 5" :key="i"
            :style="{'display': goodsList[i-1+index] != null ? '':'none'}">
            {{goodsList[i-1+index].name}}
        </td>
    </tr>
</table>

看看效果吧 :）


效果图

在v-for中动态绑定style样式，通过控制display属性值来显示需要的值。