vue页面操作记录---持续更新使用心得

在上一篇 vue2从零开始记录----timer定时器的使用 记录了如何使用定时器,接下来记录下一些页面上遇见的问题。

1.防止页面数据频繁更新，需要对新老数据进行对比。使用的是lodsh(4.17.21版本)。

//1.npm安装lodash,此处忽略
//2.在main.js中对引用
import _ from 'lodash';
Vue.prototype.$isEqual = _.isEqual;

 // 比较新获取的数据与当前数据是否相同
          if (!this.$isEqual(currentProjectInfos, newProjectInfos)) {
            this.projectInfos = newProjectInfos;
          }

2.图片不能直接在组件之指定url的路径，需要动态绑定

  //在methods中添加方法
  getImageSrc(state) {
      return state ? require('../pages/pages_Image/green.png') : require('../pages/pages_Image/red.png');
    },

//方法调用
<el-image class="stateImg" :src="getImageSrc(item.state)" fit="cover"></el-image>

3.动态修改echarts图表的尺寸。一旦在代码中指定了图表的高度，修改行内样式是无效的，需要重新生成图表并指定宽高才能生效。

						//获取图表容器
            const chartElement = document.getElementById('main' +(index+1)); 
            if (chartElement) { 
              //修改尺寸
              if(this.isFullscreen)
              {
                chartElement.style.height = "600px";
              }else{
                chartElement.style.height = "300px";
              }
              //初始化图表
                const echartInstance = this.$echarts.init(chartElement);
              // // 更新图表数据（这里假设数据已经加载完成）
               this.updateChartData(echartInstance, chart);

4.