实现n*m布局模板

在页面布局模板的开发场景中，我们常常需要实现22,33,44等布局样式，可以统一抽象为 n行m列的布局。那如何实现一个nm的布局样式呢？本篇文章向大家分享一些我的想法。

1、提供两个输入框给用户，让用户自己输入行和列的数量。
2、获取用户输入的行列，将行、列参数传给模板组件
3、模板组件内使用双层for循环渲染页面的每一个盒子。使用百分比布局动态计算盒子对应的宽、高占比。宽：Math.round(100 / this.row)，高：Math.round(100 / this.column)。给style属性绑定动态的宽高百分比。根据for循环渲染的index，设置每个盒子的唯一标识。具体循环代码如下：

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;

}
主要代码如下图所示：