在页面布局模板的开发场景中，我们经常需要实现22、33、44等布局样式，可以统一抽象为一个n行的布局，m列。那么如何实现nm布局风格呢？这篇文章与您分享我的一些想法。1、提供两个输入框给用户，让用户输入行数和列数。2、获取用户输入的行和列，将行和列参数传递给模板组件。3.模板组件使用双层for循环渲染页面上的每个框。使用百分比布局动态计算盒子对应的宽高比例。宽度：Math.round(100/this.row)，高度：Math.round(100/this.column)。将动态宽度和高度百分比绑定到样式属性。根据for循环渲染出来的索引，设置每个盒子的唯一标识。具体循环代码如下：4.在每个盒子内部，如果我们需要动态显示数组的每一项，我们可以将一维数组处理成二维数组，二维数组的每一项对应布局页面的每一项盒子可以显示数据。使用lodash中的_.chunk(array,[size=1])方法可以轻松实现。修改后的方法将数组（array）拆分为长度为size的块，并将这些块组合成一个新的数组。如果不能将数组拆分成所有等长的块，那么最后剩下的元素将组成一个块。返回一个包含拆分块的新数组（注意：相当于一个二维数组）。如：_.chunk(['a','b','c','d'],2);//=>[['a','b'],['c','d']]_.chunk(['a','b','c','d'],3);//=>[['a','b','c'],['d']]我们可以在computedlist2()中动态获取二维数组{letarr=_.chunk(this.list,this.row);returnarr;}主要代码如下图所示：
