数组交替合并

超级马楠烤鸭子

已于 2023-04-13 21:15:15 修改

阅读量90

点赞数

文章标签：前端 javascript vue.js

于 2023-04-13 11:41:30 首次发布

本文链接：https://blog.csdn.net/wait_diss/article/details/130126858

版权

新建一个newdata接受处理后的数组

const equipmentData = computed(() => equipments.value.filter((e) => e.id === 1 || e.id === 3));
// console.log('equipmentData' + equipmentData);
const newdata = computed(() => {
    var result = [];
    const imagelength = images.value.length;
    const equipmentlength = equipmentData.value.length;
    for (let i = 0; i < Math.max(imagelength, equipmentlength); i++) {
        result.push(images.value[i % imagelength]);
        result.push(equipmentData.value[i % equipmentlength]);
    }
    console.log('newdata:' + result);
    return result;

});

轮播图判断图片或者是显示设备

<CommonBorder>
        <el-carousel class="carousel" height="100%" :interval="interval" indicator-position="none">
            <el-carousel-item v-for="(path, index) in newdata" :key="path">
                <div v-if="typeof path == 'object'" class="equipment-carousel">
                    <EquipmentStateItem class="equipment-item" :data="path" />
                </div>
                <el-image
                    v-else
                    class="image"
                    :src="path"
                    :preview-src-list="images"
                    :initial-index="index"
                    preview-teleported
                    loading="lazy"
                    fit="fill"
                ></el-image>
            </el-carousel-item>
        </el-carousel>
    </CommonBorder>