vue改变el-carousel走马灯平铺4张图片

carousel组建中的走马灯两种展现形式

1、图片堆叠到一块

2、卡片化

3、需求设计需要多张图片平铺,有左右切换效果

4、只能在数据上做处理,话不多说,直接看代码

<template>
<div v-for="(item,index) in dataList" :key="index">
    <div>{{item.name}}</div>
	<el-carousel :autoplay="false">
		<el-carousel-item class="el-car" v-for="(imgData,i) in item.newDataList" :key="i" >
			<template v-for="(img,index) in imgData" >
				<img :key="index" :src="img.url" alt="" class="top-img"/>
			</template>
		</el-carousel-item>
	</el-carousel>
</div>
</template>
 
<script>
export default {
data() {
    return {
        dataList:[{
            id: 176,
            name: '第一批图片'
            images: "../a.jpg,../b.jpg,../c.jpg,../d.jpg"
        }],
    }
},
mounted() {
    this.getImg()
},
methods: {
    getImg(){
	    this.dataList.forEach(e=>{
            //处理images数据格式
		    e.images = e.images.split(',').map(item =>{
			    return {url: item}
		    })
		
		    e.newDataList = [] //新建数组循环获取4个图片
		    for(let i = 0; i<e.images.length; i+=4) {
			    e.newDataList.push(e.images.slice(i,i+4))
		    }
	    })
    }
},
}
</script>
 
<style lang="scss" scoped>
.el-car{
    width: 100%;
    display: flex;
    .top-img{
      width: 25%;
      height: 185px;
      margin-right: 10px;
      cursor: pointer;
    }
}
</style>复制

5、敲黑板:

        5.1、data中数据,images路径需要引入本地图片或后端数据图片地址

        5.2、实际使用,对比后端数据返回格式images是否一致,不一致的自行处理哈