标签：point equipmentList js item let 带传参 infoWindow id 模板

js 拼接模板字符串里面写事件带传参

我是在高德地图的弹窗里面写的，我只传了一个参数，（我把对象转成字符串传的时候会报错（应该要转义什么的），所以只传了一个参数）还有方法要写在监听点击mark的方法里面，不然不生效

if (v.hasEquipment && v.equipmentList && v.equipmentList.length > 0) {
                            let bdpoint = this.bdencrypt(v.longitude, v.latitude) // 坐标转换
                            let point = new BMapGL.Point(...bdpoint)
                            pointArr.push(point)
                            let marker = new BMapGL.Marker(point, {
                                icon: myIcon1
                            });
                            map.addOverlay(marker); // 绘制点坐标
                            let pamsList = ``
                            let atr = ''
                            v.equipmentList.forEach((item, index) => {
                                atr = JSON.stringify(item)
                                if (item.status === '0') {
                                    this.normalEquipmentData.push({name:item.equipmentName,id:item.id})
                                    this.zcsb++
                                    pamsList += `
                                    <tr>
                                    <th align="center">${index+1}</th>
                                    <th align="center">${item.equipmentName}</th>
                                    <th align="center" style="color: #30DA74">正常</th>
                                    <th align="center" ><input id="btn" style="width: 60px;margin: 5px 0" type="button" value="详情" onclick="btnDetail('${item.id}')" /></th>
                                    </tr>
                                    `
                                }else {
                                    this.abnormalEquipmentData.push({name:item.equipmentName,id:item.id})
                                    this.ycsb++
                                    pamsList += `
                                    <tr>
                                    <th align="center">${index+1}</th>
                                    <th align="center">${item.equipmentName}</th>
                                    <th align="center" style="color: #F56580">异常</th>
                                    <th align="center" ><input id="btn" style="width: 60px;margin: 5px 0"  type="button" value="详情" onclick="btnDetail('${item.id}')" /></th>
                                    </tr>
                                    `
                                }

                            })
                            let inner = `
                            <p style="padding: 10px 0">站点名称：${v.name}</p>
                            <table width="380" border="1" style="border-collapse: collapse;">
                            <tr>
                            <th align="center">序号</th>
                            <th align="center">设备名称</th>
                            <th align="center">状态</th>
                            <th align="center">操作</th>
                            ${pamsList}
                            </table>
                            `
                            let infoWindow = new BMapGL.InfoWindow(inner, this.opts); // 创建信息窗口对象
                            marker.addEventListener('click', () => {
                                map.openInfoWindow(infoWindow, point); // 开启信息窗口
                                // 图片加载完毕重绘infoWindow
                                // document.getElementById('imgDemo').onload = function () {
                                //     infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏
                                // };
                                window.btnDetail =(i)=> {
                                    // this.detailEquipmentData = v.equipmentList[i]
                                    let id = i
                                    console.log(id)
                                    
                                    this.detailEquipmentFlag = true

                                    // console.log(v.equipmentList[i])
                                    // console.log(this.normalEquipmentFlag)
                                }
                            });
                        }

标签：point,equipmentList,js,item,let,带传参,infoWindow,id,模板
来源： https://blog.csdn.net/qq706352062/article/details/111634496

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。