Vue使用el-carousel实现页面数据轮播并每页多条

el-carousel实现页面每页多条数据自动轮播

大数据页面需要展示一页六条数据，按分页轮播。
最终实现效果

html部分代码：

<div class="cointan">
    <div class="title1">
      <div style="margin-left:25px;line-height: 22px;font-family : '优设标题黑';">
        各学院学生人数
        <span class="xiaobiao">/  学院数量：{{xuelength}}</span>
      </div>
    </div>
    <!-- 滚动块 -->
    <el-carousel trigger="click" height="260px" style="height: 260px;width: 390px;margin: 44px 0 0 28px;">
      <el-carousel-item v-for="(list,index) in xueyuan" :key="index">
        <div class="gun">
          <div class="mokuai" v-for="(item,index2) in list" :key="index2">
            <div class="loudong"></div>
            <div class="bgtu">{{item.college}}</div>
            <div class="zongtext">
              <div class="xueyuanshu">{{item.num}}</div>
            </div>
            <div class="zongnum">人</div>
            <div class="zongline"></div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>

script部分代码数据：

export default {
  name: 'leftTop',
  props: {
    msg: String
  },
  data() {
    return {
      xueyuan:[],//各学院
      xuelength:'',//学院数量
    }
  },
  mounted(){
    this.getxueyuan()
  },
  methods:{
    //各学院人数
    getxueyuan() {
      this.xueyuan=[]
      this.$axios.post('/jiao/api/getNumberInCollege',
      {
      },
      {
        headers: {
        "token": sessionStorage.getItem('token'),//登录获取的token
        },
      }
      ).then(res => {
        if (res.data.code==200) {
          this.xuelength=res.data.data.length
          // 课程表
          res.data.data.forEach(data => {
            this.xueyuan.push(data)
          })
          
          let newDataList = []
          let current = 0
          if(this.xueyuan && this.xueyuan.length>0){
            for(let i=0;i<=this.xueyuan.length-1;i++){
              if(i%6 !== 0 || i === 0 ){
                if(!newDataList[current]){
                  newDataList.push([this.xueyuan[i]])
                }else{
                  newDataList[current].push(this.xueyuan[i])
                }
              }else{
                current++
                newDataList.push([this.xueyuan[i]])
              }
            }
          }
          this.xueyuan = [...newDataList]
        }
      })
    },
  },
}

css部分：

<style scoped lang="scss">
.cointan{
  width: 450px;
  height: 302px;
  background-image: url('../assets/index/litterbackground.png');
  background-size: 100%;
  
}
.title1{
  position: absolute;
  margin: 9px 0 0 10px;
  font-size: 20px;
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
}
.xiaobiao{
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0px;
  color: rgba(255, 255, 255, 1);
}
// 走马灯滚动
.gun{
  position: absolute;
  margin: 0px 0 0 0px;
  width: 390px;
  height: 260px;
}
.mokuai{
  // margin-top: 10px;
  width: 390px;
  height: 38px;
}
.loudong{
  position: absolute;
  margin: 21px 0 0 0px;
  width: 7px;
  height: 7px;
  background: rgba(204, 204, 204, 1);
}
.bgtu{
  position: absolute;
  margin: 11px 0 0 14px;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.17px;
  color: rgba(255, 255, 255, 1);
}
.zongtext{
  position: absolute;
  margin: 8px 0 0 241px;
  background-image: url('../assets/leftTop/bg.png');
  background-size: 100%;
  width: 122px;
  height: 24px;
}
.xueyuanshu{
  position: absolute;
  width: 86px;
  height: 24px;
  margin: 0px 0 0 36px;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(255, 255, 255, 1);
  font-family : '优设标题黑';
  text-align: center;
}
.zongnum{
  position: absolute;
  margin: 17px 0 0 367px;
  font-size: 12px;
  font-weight: 400;
  line-height: 17.38px;
  color: rgba(255, 255, 255, 1);
}
.zongline{
  position: absolute;
  margin: 37px 0 0 0px;
  width: 380px;
  height: 1px;
  background: rgba(61, 90, 94, 1);
}