工作中遇到的问题

1、

利用鼠标移入和移除控制遮罩层样式，会导致闪烁问题，可以利用css的：hover控制遮罩层的样式，没有移入时display：none，移入时display：block。

2、

对于elmentui中多选下拉框，对后台已经返回的数据，进行处理，会导致没有无效果。数据更新，但是页面没有重新渲染。可以理由@change="$forceUpdate()"，强制进行渲染。（el-input表单时也会出现输入不显示）

3、

表单重置的重点在于在el-form-item中设置prop。

4、

直接操作element表格中的row，会导致表格数据跟着变化

5、

对于el-dialog的关闭问题，可以直接在组件上使用@close,监听对话框的关闭。

6、

echarts随着屏幕变化

    let main=this.$echarts.init(document.getElementById("main"))
    let alarm=this.$echarts.init(document.getElementById("alarm"))
    window.addEventListener("resize", () => {
    main.resize()
    alarm.resize()
  })

7、

点击回到顶部

goTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 20)
    },

8、

父组件往子组件传递图片

<list :topList="topList" :list="newList" title="新闻中心" :img="require('../../assets/new_center.png')" />

9

el-select中自定义组件，没有数据会把自定义的全部隐藏，进行样式穿透也无效，需要一下代码，然后样式穿透。

<el-select
          v-model="form.addressee"
          multiple
          placeholder="请选择"
          style="width: 240px"
          popper-class="inline"
          :popper-append-to-body="false"
        >

10

echart封装成vue组件，重复调用，需要用 this.$echarts.init(this.$refs.echarts).setOption Y轴双轴的右轴数据根据

series: [
                    {
                        name: "申报电量",
                        type: "bar",
                        barWidth: "50%",
                         yAxisIndex: 1,//主要是用这个标记
                        data: [123, 123, 432, 567],
                        itemStyle: {
                            color: "#00aff0"
                        }
                    }]

11

element的表格组件，用flex布局，最后一行显示不全，

/deep/ .el-table__body-wrapper {
    overflow-x: none !important;
}

12

flex布局实现左右布局 父级设置：

display:flex;
justify-content: flex-start;

需要靠右的子级：

margin-left:auto;

13

当使用element的表格组件的表尾需要合计和平均值时可参考一下文章 (5条消息) elementui el-table 多行合计、插入标签_Nancy617的博客-CSDN博客_el-table多行合计

14

element图片上传未完善版本,先把fileList用于展示存储的文件：

<el-form-item label="设备照片:">
              <el-upload
                action=""
                list-type="picture-card"
                :on-change="change"
                :on-preview="handlePictureCardPreview"
                multiple
                :limit="4"
                :before-upload="uploadVerify"
                :http-request="uploadImg"
                :headers="myHeaders"
                :on-remove="removeImg"
                :file-list="fileList"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="imgDialog">
                <img width="100% :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>

15

下载文件

export function download(url, downParams, fileName, method = 'post') {
  downloadData(url, downParams, method).then(res => {
    console.log(res);
    const content = res
    const blob = new Blob([content]) // 构造一个blob对象来处理数据
    // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
    // IE10以上支持blob但是依然不支持download
    if ('download' in document.createElement('a')) { // 支持a标签download的浏览器
      const link = document.createElement('a') // 创建a标签
      link.download = fileName // a标签添加属性
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      document.body.appendChild(link)
      link.click() // 执行下载
      URL.revokeObjectURL(link.href) // 释放url
      document.body.removeChild(link) // 释放标签
    } else { // 其他浏览器
      navigator.msSaveBlob(blob, fileName)
    }
    if (response) {
      response(res);
    }
  }).catch((error) => {
    console.log(error)
  })
}

16

element-UI中，在弹框中使用el-tabs,需要将destroy-on-close设置为false