ElementUI轮播图指示器设置为图片

效果图：

<template>
  <div>
    <main>
      <div class="product-intro">
        <div class="preview-wrap">
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in specImages" :key="item">
              <img :src="item" alt="轮播图" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
  data() {
    return {
      specImages: [
          //350x350大小的图片
      ],
      smallSpecImages:[
          //50x50大小的图片
      ]
    };
  },
  methods:{
    //   将轮播图指示器渲染成图片
    indicatorToimage:function(){
        var a = document.querySelectorAll(".el-carousel__button");
        // console.log(a);
        for (let i in this.specImages){
            //添加一个img
            let img = document.createElement('img');
            img.src=this.smallSpecImages[i];
            //加到button里面
            a[i].appendChild(img);
        }
    }
  },
  mounted(){
      //在完全加载后再执行函数
      this.$nextTick(()=>this.indicatorToimage());
  }
};
</script>

<style lang="scss" scoped>
/* 轮播图样式 */
.preview-wrap .el-carousel {
  width: 350px;
  height: 400px;
}
.preview-wrap /deep/.el-carousel__button{
    width: 50px;
    height: 50px;
}
</style>

最重要的就是 this.$nextTick() 能够在页面全部加载完成后再执行函数，要不然就会出现空列表的情况。