当前位置: 首页 > news >正文

解决Vue2封装组件含有echarts时多次调用出现id重复问题

解决Vue2封装组件含有echarts时多次调用出现id重复问题

  • 1、前言
  • 2、解决方法

1、前言

封装组件中使用echarts时,多次调用导致id重复,出现页面不渲染、数据覆盖等问题。

2、解决方法

  1. 把id改成动态传参(这里就不作代码展示了)

  2. 把id换成ref(推荐)

// 修改前
<div class="echarts-box"><div id="soh_chart" style="width: 100px; height: 100px" />
</div>
var myChartDom = document.getElementById('soh_chart')
let myChart = echarts.init(myChartDom)// 修改后
var myChartDom = this.$refs.soh_chart
let myChart = echarts.init(myChartDom)
http://www.lryc.cn/news/194641.html

相关文章:

  • IntelliJ IDEA 中 Maven 相关操作详解
  • 3分钟,快速上手Postman接口测试!
  • 【微前端】single-spa 到底是个什么鬼
  • log4j2同步日志引发的性能问题 | 京东物流技术团队
  • vs studio Ctrl+D 快捷键失效(无法复制行)
  • 数据结构题型18-哈夫曼树和哈夫曼编码
  • 【广州华锐互动】VR模拟电力生产事故,切身感受危险发生
  • kafka安装和使用的入门教程
  • 享搭低代码平台:加速企业应用开发,轻松搭建表单和报表
  • 华为云应用中间件DCS系列—Redis实现(社交APP)实时评论
  • 01-spring源码概述
  • datax 同步本地csv到mysql
  • 国内原汁原味的免费sd训练工具--哩布哩布AI
  • 组合数(1) 用Vector实现获取所有组合数列表的QT实现
  • Ultra-Fast-Lane-Detection-v2 裁剪数据增强
  • 从零开始学习调用百度地图网页API:三、鼠标点击绘图功能
  • 强化学习案例复现(1)--- MountainCar基于Q-learning
  • BUUCTF学习(6): 命令执行ip
  • javaweb:mybatis:mapper(sql映射+代理开发+配置文件之设置别名、多环境配置、顺序+注解开发)
  • JavaScript基础知识——练习巩固(2)
  • FutureTask的测试使用和方法执行分析
  • SpringMVC的请求处理
  • 260. 只出现一次的数字 III
  • 家政预约接单系统,家政保洁小程序开发;
  • 网络安全工程师需要学什么?零基础怎么从入门到精通,看这一篇就够了
  • 出差学知识No3:ubuntu查询文件大小|文件包大小|磁盘占用情况等
  • 详解cv2.copyMakeBorder函数【OpenCV图像边界填充Python版本】
  • 前端技术-并发请求
  • 面试题-React(十三):React中获取Refs的几种方式
  • Linux CentOS 7升级curl8.4.0使用编译安装方式