小编Dha*_*wal的帖子

在Vuetify中使用<v-for>和<v-checkbox>以表格格式显示多个复选框?

我正在使用 VueJS 的VuetifyJs,并且试图以表格格式显示对象数组中的复选框。 所需的输出如下所示:

在此处输入图片说明

选中“所有用户”时,应选中所有复选框。


我创建了一个行布局,并将该行分为两个弹性框,因此我具有两列的行结构。我循环使用“ v-for”,并为每一行显示当前索引和下一个索引的值。但是,下一次迭代循环时,将重复最后一个条目。我可以到达的最接近的位置如下所示:

在此处输入图片说明


CodePen网址: https ://codepen.io/dhnsh/pen/ZRMgoE

我也尝试使用表格代替布局和弹性,但无法做到。在codepen中,我使用函数“ checkLength”来获取下一个索引,因为使用预增量运算符来递增“ index”会产生错误(可能是由于数组超出范围)。


我在以下查询中苦苦挣扎:

1)我们如何在Vuetify中显示所需的输出?

2)是否有像我们在Javascript中那样以“ 2”为增量迭代“ v-for”?例如:

    for(var i=0;i<array.length();i += 2)
Run Code Online (Sandbox Code Playgroud)

vue.js vue-component vuejs2 vuetify.js

0
推荐指数
1
解决办法
3007
查看次数

标签 统计

vue-component ×1

vue.js ×1

vuejs2 ×1

vuetify.js ×1