实现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，设置每个盒子的唯一标识。具体循环代码如下：

 <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;

}
主要代码如下图所示：