element 实现自定义 宫格 布局

前言：
由于工作需要需要实现网页跑马灯，并且每个单独的页面可以实现自定义布局格式（比如33,44,5*5）等布局方式

效果：
直接先预览效果

实现原理：
注：页面默认布局是3*3
1，根据数据length 以及默认布局方式 计算出 跑马灯页数

pageTotal为跑马灯每页显示总数
carouselNum为跑马灯需要循环次数
2，根据跑马页以及pageTotal分割每页应渲染数据

dynamicClass为动态设置grid 布局方式
默认布局方式如下：

3，value为下拉框选中 布局数据，watch监听变化并计算出pageTotal、carouselNum以及设置grid布局设置方式

全部代码如下：

<template>
  <div class="container">
    <div class="btn_box">
      <el-button type="primary">主要按钮</el-button>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button>{{ dataList.length }}</el-button>
      <el-button>{{ carouselNum }}</el-button>
      <el-button>{{ pageTotal }}</el-button>
    </div>
    <div class="carousel_box">
      <el-carousel
        style="height:100%"
        :autoplay="false"
        indicator-position="outside"
      >
        <el-carousel-item v-for="(item, iindex) in carouselNum" :key="item">
          <div class="leyout_cont" :style="dynamicClass">
            <div
              v-for="(titem, tindex) in dataList.slice(
                iindex * pageTotal,
                (iindex + 1) * pageTotal
              )"
              :key="tindex"
              class="d_item"
              :style="{ 'background-color': colorArr[tindex] }"
            >
              {{ titem }}
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: '3*3',
          label: '3*3'
        },
        {
          value: '4*4',
          label: '4*4'
        },
        {
          value: '4*5',
          label: '4*5'
        },
        {
          value: '5*4',
          label: '5*4'
        },
        {
          value: '5*5',
          label: '5*5'
        },
        {
          value: '6*6',
          label: '6*6'
        }
      ],
      value: '3*3',
      carouselNum: 1, // 跑马灯页数
      colorArr: [], //  临时生成color 数据
      dynamicClass: {
        'grid-template-columns': 'repeat(3, 33.33%) !important',
        'grid-template-rows': 'repeat(3, 33%.33) !important'
      },
      dataList: [], //
      allArr: [],
      pageTotal: 9
    }
  },
  mounted() {
    for (let i = 0; i <= 99; i++) {
      this.dataList.push(i)
    }
    this.carouselNum = Math.ceil(this.dataList.length / 9)
    this.random()
  },
  watch: {
    value: {
      handler: function(newValue) {
        if (newValue) {
          const arr = newValue.split('*')
          this.pageTotal = Number(arr[0]) * Number(arr[1])
          this.carouselNum = Math.ceil(
            this.dataList.length / (Number(arr[0]) * Number(arr[1]))
          )
          const columns = Math.floor([100 / Number(arr[0])] * 100) / 100
          const rows = Math.floor([100 / Number(arr[1])] * 100) / 100
          this.dynamicClass[
            'grid-template-columns'
          ] = `repeat(${arr[0]},${columns}%) !important`
          this.dynamicClass[
            'grid-template-rows'
          ] = `repeat(${arr[1]},${rows}%) !important`
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    random() {
      for (let i = 0; i < 100; i++) {
        this.colorArr.push(this.randomHexColor())
      }
    },
    randomHexColor() {
      var hex = Math.floor(Math.random() * 16777216).toString(16)
      while (hex.length < 6) {
        hex = '0' + hex
      }
      return '#' + hex
    }
  }
}
</script>
<style>
.el-carousel__container {
  height: 100% !important;
  overflow: hidden !important;
}
.el-carousel__indicators {
  display: none !important;
}
</style>
<style scoped>
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.container {
  width: 100% !important;
  height: 100% !important;
  display: grid;
  grid-template-rows: 40px 1fr;
  overflow: hidden;
}
.btn_box {
  height: 40px;
  background-color: #f2f2f3;
}
.carousel_box {
  height: 100%;
  overflow: hidden !important;
  border: 1px solid red;
  padding: 0 !important;
  margin: 0 !important;
  display: grid;
}

.leyout_cont {
  border: 1px solid skyblue;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: grid;
  overflow: auto;
  justify-content: center;
}
.el-carousel__item h3 {
  color: #e9ebec;
  font-size: 18px;
  opacity: 0.75;
  margin: 0;
}
</style>