共计 1269 个字符，预计需要花费 4 分钟才能阅读完成。
在页面布局模板的开发场景中，咱们经常须要实现 2 2,33,4 4 等布局款式，能够对立形象为 n 行 m 列的布局。那如何实现一个 n m 的布局款式呢？本篇文章向大家分享一些我的想法。
1、提供两个输入框给用户，让用户本人输出行和列的数量。
2、获取用户输出的行列，将行、列参数传给模板组件
3、模板组件内应用双层 for 循环渲染页面的每一个盒子。应用百分比布局动静计算盒子对应的宽、高占比。宽：Math.round(100 / this.row)，高：Math.round(100 / this.column)。给 style 属性绑定动静的宽高百分比。依据 for 循环渲染的 index，设置每个盒子的惟一标识。具体循环代码如下：
<div
v-for="(item, ind) in column"
:key="ind"
class="item_block_row"
:style="{width:'100%', height:'100%'}"
>
<div
v-for="(item2, ind2) in row"
:key="ind2"
:style="{width: itemWidth - 1 +'%', height: itemHeight2 - 1 +'%'}"
class="item_block"
>
<i
v-show="
list2 &&
list2.length &&
playDomName !== 'wasm_player_block_' + ind + '_' + ind2
"class="el-icon-caret-right template_play_btn"@click="playVideo(ind, ind2)"
></i>
<i
v-if="list2 && list2.length"
class="wasm_player_block"
:class="'wasm_player_block_' + ind + '_' + ind2":id="'play_video_'+ ind +'_'+ ind2"
style="width:100%;height:100%;"
></i>
</div>
</div>4、在每一个盒子外部，如果咱们须要动态显示数组的每一项，能够将一维数组解决为二维数组，二维数组的每一项正好对应布局页面的每一个盒子。即可进行数据的展现。
应用 lodash 中的_.chunk(array, [size=1]) 办法即可轻松实现。改办法将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。如果 array 无奈被宰割成全副等长的区块，那么最初残余的元素将组成一个区块。返回一个蕴含拆分区块的新数组（注：相当于一个二维数组）。如：
_.chunk([‘a’, ‘b’, ‘c’, ‘d’], 2);// => [[‘a’, ‘b’], [‘c’, ‘d’]]
_.chunk([‘a’, ‘b’, ‘c’, ‘d’], 3);// => [[‘a’, ‘b’, ‘c’], [‘d’]]
咱们能够在 computed 中动静获取改二维数组
list2() {
let arr = _.chunk(this.list, this.row);
return arr;}
次要代码如下图所示：
