vue + element-ui实现左右箭头切换，每页显示自定义数据。

一、如何实现左右箭头切换？

采用element-ui中的Carousel组件

<el-carousel arrow="always" :loop="false" :initial-index="0"
     indicator-position="none" :autoplay="false" height="60px">
  <el-carousel-item v-for="(item, index) in _GroupCout" :key="index">
      <el-tooltip
      v-for="(c, index) in item"
      :key="index"
      effect="light"
      :content="c.description"
      placement="top-start">
        <el-button type="primary" @click="commandClick(c, index)">
          {{c.tag}}
        </el-button>
      </el-tooltip>
  </el-carousel-item>
</el-carousel>

二、自定义显示页数及数据处理

_GroupCout () {
      // 获取数据
      const objArray = this._Commands
      // 拿到数组的长度
      const len = objArray.length
      // 自定义每页显示多少个数据-假设每行显示10个
      const n = 10
      const lineNum = len % 10 === 0 ? len / 10 : Math.floor((len / 10) + 1)
      const res = []
       // 处理
      for (let i = 0; i < lineNum; i++) {
        const temp = objArray.slice(i * n, i * n + n)
        res.push(JSON.parse(JSON.stringify(temp)))
      }
      return res
    }