vue中el-carousel 分页操作

在Vue中使用el-carousel组件可以实现轮播图效果，如果需要添加分页操作，可以使用el-pagination组件来实现。

首先需要安装Element UI组件库，然后在vue文件中引入el-carousel和el-pagination组件。

<template>
  <div>
    <el-carousel :interval="4000" arrow="hover">
      <el-carousel-item v-for="(item,index) in list" :key="index">
        <img :src="item.src">
      </el-carousel-item>
    </el-carousel>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

其中，el-carousel组件包含了轮播图的内容，el-pagination组件用于分页操作。currentPage表示当前页码，pageSize表示每页显示的数量，total表示总共的数量。

在methods中，需要实现handleCurrentChange方法，用于监听当前页码的变化。

methods: {
  handleCurrentChange(val) {
    console.log(`当前页：${val}`);
  }
}

这样就可以实现el-carousel的分页操作了。