Vue 代码中多选设备列表并拼接 ID 为逗号分隔字符串
<p>"""<template>\n <div class="music-management">\n <el-card class="music-left">\n <div>\n <div class="music-title">音源列表</div>\n <div class="music-content">\n <div class="music-list" v-for="(item, index) in dateList" :key="index" @click="musicStart(item, index)"\n :class="[index === highlightIndex ? 'highlight' : '', highlightIndex == index ? 'active' : '']">\n <svg-icon icon-class="music" style="font-size:25px;vertical-align: middle;color: #f30511;""></svg-icon>\n {{ item.musicName }}\n </div>\n </div>\n </div>\n </el-card>\n\n <el-card class="musci-right">\n <div class="music-title" style="margin-bottom: 0">\n <div class="music-tab">\n <div :class="index == 1 ? 'active' : ''" @click="index = 1; musicChoose = musicList.zone" class="tab">分区</div>\n </div>\n </div>\n <div class="music-bottom">\n <el-card class="music-item" v-for="(item, index) in musicChoose" :key="index" :class="isActive(index) ? 'active' : ''"\n @click.native="musicClick(item, index)">\n <div class="top">\n <div>状态：{{ item.deviceState }}</div>\n <div>\n <svg-icon icon-class="naozhong"></svg-icon>\n </div>\n </div>\n <div class="icon" @click="ipChoose(item)">\n <svg-icon icon-class="lianjie" style="font-size: 40px;vertical-align: middle"></svg-icon>\n </div>\n <div style="text-align: center">\n {{ item.deviceIP }}\n </div>\n <div class="text">\n <div> 位置: {{ item.deviceName }}</div>\n <div class="check" :class="isActive(index) ? 'active' : ''">\n <svg-icon icon-class="icon-duihao"\n style="font-size: 12px; vertical-align: middle;"></svg-icon>\n </div>\n </div>\n </el-card>\n </div>\n </el-card>\n <div class="music-play">\n <div class="left">\n <img src="../../../assets/images/music-left.png" alt="" @click="playPrev">\n </div>\n <div class="play" v-if="playState" >\n <img src="../../../assets/images/music-play.png" alt="" @click="playMusic">\n </div>\n <div class="pause" v-if="!playState" >\n <img src="../../../assets/images/music-pause.png" alt="" @click="stopMusic">\n </div>\n <div class="right">\n <img src="../../../assets/images/music-right.png" alt="" @click="playNext">\n </div>\n\n <div class="sound">\n <img src="../../../assets/images/music-sound.png" alt="">\n </div>\n <div class="slider">\n <el-slider v-model="soundValue"></el-slider>\n </div>\n </div>\n </div>\n</template>\n\n<script>\nimport { getMusicList, getAllDevice } from '@/api/data/music'\n\nexport default {\n data() {\n return {\n groupAndMusic:'11',\n playState:false,\n checkShow: false,\n securityData: [],\n soundValue: 32,\n highlightIndex: 0, // 当前选中的音源索引\n index: 1,\n activeTab: 'zone',\n dateList: [],\n musicChoose: [\n { id: 1, status: '离线', ip: '192.168.80.30', percent: '10%' },\n { id: 2, status: '离线', ip: '192.168.80.31', percent: '20%' },\n { id: 3, status: '离线', ip: '192.168.80.32', percent: '30%' },\n ],\n musicList: {\n zone: [\n { id: 1, status: '离线', ip: '192.168.80.30', percent: '10%' },\n { id: 2, status: '离线', ip: '192.168.80.31', percent: '20%' },\n { id: 3, status: '离线', ip: '192.168.80.32', percent: '30%' },\n ],\n group: [\n { id: 4, status: '离线', ip: '192.168.80.33', percent: '10%' },\n { id: 5, status: '离线', ip: '192.168.80.34', percent: '0%' },\n { id: 6, status: '离线', ip: '192.168.80.35', percent: '0%' },\n ],\n task: [\n { id: 7, status: '离线', ip: '192.168.80.36', percent: '20%' },\n { id: 8, status: '离线', ip: '192.168.80.37', percent: '0%' },\n { id: 9, status: '离线', ip: '192.168.80.38', percent: '0%' },\n ],\n },\n };\n },\n created() {\n //this.musicChoose = this.musicList.zone;\n console.log("初始化分区===", this.musicChoose)\n this.getMusics();\n this.getDevice();\n },\n methods: {\n musicClick(item, path) {\n\n let index = this.securityData.indexOf(path);\n if (this.isActive(path)) {\n this.securityData.splice(index, 1);\n } else {\n\n this.securityData.push(path);\n }\n this.groupAndMusic = this.securityData.map(i => this.musicChoose[i].id).join(',');\n },\n isActive(item) {\n let isClass = false;\n if (this.securityData.indexOf(item) !== -1) {\n isClass = true;\n } else {\n isClass = false;\n }\n return isClass;\n },\n ipChoose(item) {\n \n console.log("选择ip====", item)\n\n },\n musicStart(item, index) {\n console.log("播放music====", item)\n // 处理点击事件，可以将 item 作为参数传递给其他组件或函数\n console.log('索引', index)\n this.highlightIndex = index; // 更新选中的音源索引\n console.log('更新选中的音源索引', this.highlightIndex);\n this.groupAndMusic = item.groupAndMusic;\n },\n //获取音乐目录\n getMusics() {\n getMusicList().then(res => {\n console.log('音乐列表', res.data)\n this.dateList = res.data;\n this.groupAndMusic = this.dateList[0].groupAndMusic\n })\n },\n //功放列表\n getDevice() {\n getAllDevice().then(res => {\n this.musicChoose = res.data\n console.log('广播设备列表---> ', this.musicChoose);\n })\n },\n // 播放音乐\n playMusic() {\n this.playState=false\n },\n // 暂停音乐\n stopMusic() {\n if ( this.groupAndMusic=='11'){\n this.$message.error('请选中歌曲')\n }else {\n this.playState=true ;\n console.log(this.groupAndMusic)\n }\n },\n //播放上一首\n playPrev(){\n if (this.highlightIndex==0){\n this.highlightIndex = this.dateList.length-1\n }else {\n this.highlightIndex--;\n console.log( '上一 当前播放歌曲->',this.highlightIndex)\n }\n this.groupAndMusic= this.dateList[this.highlightIndex].groupAndMusic\n },\n playNext(){\n if (this.highlightIndex==this.dateList.length-1){\n this.highlightIndex =0;\n }else {\n this.highlightIndex++;\n console.log( '下一 当前播放歌曲->',this.highlightIndex)\n }\n this.groupAndMusic= this.dateList[this.highlightIndex].groupAndMusic\n },\n //设置音量\n setVol() { },\n\n\n },\n mounted() {\n\n },\n\n};\n</script>\n\n<style scoped lang="less">\n/deep/.el-slider__runway {\n height: 8px !important;\n}\n\n/deep/ .el-slider__bar {\n height: 8px !important;\n}\n\n/deep/ .el-slider__button {\n border: 2px solid #eeeeee;\n width: 18px;\n height: 18px;\n}\n\n.highlight {\n background-color: #dd0090;\n}\n\n.music-management {\n display: flex;\n padding: 20px;\n padding-bottom: 80px;\n}\n\n.music-left {\n width: 20%;\n height: 1080px;\n border-radius: 15px;\n margin-right: 15px;\n}\n\n.musci-right {\n width: 70%;\n height: 1080px;\n}\n\n.music-title {\n height: 60px;\n background: #4e9bff;\n color: #fff;\n font-size: 20px;\n line-height: 60px;\n padding-left: 30px;\n margin-bottom: 10px;\n}\n\n.music-content {\n overflow-y: auto;\n height: 1010px;\n\n &::-webkit-scrollbar {\n width: 0;\n }\n}\n\n.music-list {\n height: 50px;\n line-height: 50px;\n padding-left: 15px;\n background: #e3d2c3;\n /* 设置文本超出部分隐藏 */\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &:hover {\n background-color: #598dca !important;\n color: #fff;\n\n .svg-icon {\n color: #fff !important;\n }\n }\n\n &.active {\n background-color: #598dca !important;\n color: #fff;\n\n .svg-icon {\n color: #fff !important;\n }\n }\n}\n\n.music-list:nth-child(2n) {\n background: #e4cab0;\n}\n\n.musci-right {\n border-radius: 15px;\n}\n\n.music-tab {\n display: flex;\n align-items: center;\n height: 60px;\n}\n\n.tab {\n width: 100px;\n height: 40px;\n text-align: center;\n line-height: 40px;\n // border:1px solid #6acfc1;\n // &.active{\n // background: #6acfc1;\n // }\n}\n\n.music-bottom {\n flex-wrap: wrap;\n display: flex;\n padding: 20px;\n overflow-y: auto;\n height: 1020px;\n\n &::-webkit-scrollbar {\n width: 0;\n }\n .music-item {\n width: 250px;\n height: 200px;\n border-radius: 12px;\n background: #fae5e4;\n padding: 10px;\n text-align: center;\n margin-right: 10px;\n border: 2px solid transparent;\n margin-bottom: 6px;\n\n .top {\n display: flex;\n justify-content: space-between;\n\n }\n\n .icon {\n width: 70px;\n height: 70px;\n background: #fff;\n border-radius: 50%;\n line-height: 70px;\n margin: 20px auto;\n }\n\n .text {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 0;\n\n .check {\n width: 16px;\n height: 16px;\n background-color: #fff;\n border: 1px solid #4e9bff;\n border-radius: 4px;\n text-align: center;\n line-height: 16px;\n\n .svg-icon {\n visibility: hidden;\n }\n\n &.active {\n .svg-icon {\n visibility: inherit;\n }\n }\n }\n }\n\n &:hover {\n border: 2px solid #95c2fa;\n }\n\n &.active {\n border: 2px solid #95c2fa;\n }\n }\n}\n\n.music-play {\n position: fixed;\n bottom: 0;\n left: 0;\n width: 91%;\n height: 70px;\n background: #fff;\n display: flex;\n align-items: center;\n // margin-left: 200px;\n padding-left: 280px;\n.left{\n cursor: pointer;\n}\n .play {\n padding: 0 20px;\n cursor: pointer;\n }\n .pause {\n padding: 0 20px;\n }\n\n .sound {\n margin-left: 100px;\n cursor: pointer;\n }\n\n .slider {\n margin-left: 20px;\n width: 240px;\n\n\n }\n\n}</style>\n内容：可以在musicClick方法中，将选中的设备的id拼接成字符串，然后赋值给groupAndMusic属性。修改后的代码如下所示：\n\n<code>javascript\nmethods: {\n musicClick(item, path) {\n let index = this.securityData.indexOf(path);\n if (this.isActive(path)) {\n this.securityData.splice(index, 1);\n } else {\n this.securityData.push(path);\n }\n this.groupAndMusic = this.securityData.map(i => this.musicChoose[i].id).join(',');\n },\n isActive(item) {\n let isClass = false;\n if (this.securityData.indexOf(item) !== -1) {\n isClass = true;\n } else {\n isClass = false;\n }\n return isClass;\n },\n // ...\n},\n</code>\n\n在musicClick方法中，先根据securityData数组中的索引获取选中的设备对象的id，然后使用map方法将id取出来，最后使用join方法将id用逗号拼接起来赋值给groupAndMusic属性。这样就实现了将选中的设备的id用逗号拼接起来。\n</p>
原文地址: https://www.cveoy.top/t/topic/plxk 著作权归作者所有。请勿转载和采集!