项目bug积累

echarts

echarts存在缓存问题，请求得到新数据后，更新图表，图表扔存在上一次的数据，存在合并现象。
可以先用clear()：清空当前实例，会移除实例中所有的组件和图表。
后在setOption()中添加第二参数true，说明不与上次数据合并

代码示例展示：

有缓存效果的，不能使用先初始化后更新图表的方式，这样会报错，所以要直接初始化和数据更新存放在同一个方法里

vuex

项目中有存在多个地方使用同一数据的，比如账号状态，消息更新，以及认状态更改等等。
或者，修改需要同步响应的，建议使用vuex，而不是使用sessionStorage。但vuex页面刷新后，数据会变回初始化，而sessionStorage则不会。因此数据的缓存，可以用sessionStorage结合vuex实现。
vuex中的状态初始化时就取用sessionStorage中的数据

在请求获得数据就通过commit调用mutations中的方法保存同时将数据存入state和sessionStorage。
在一些需要更新的数据，可以先在actions定义方法，然后再某个操作结束后，就通过dispatch调用dispatch中对应的方法，然后在调用mutations在存储数据。
在页面中使用数据是，先用computed来获得state中的状态，然后再用watch监视computed的数据，再赋值给响应的数据，可以实现响应。

文件下载（xlsx）

通过a标签实现。获取到后端返回的数据，再借助Blob来进行实现。Blob中的type要与后端设置的一致，然后创建a标签，通过URL.createObjectURL(blob)获取到URL，充当a标签的href值。a标签的download属性是对应文件名。然后用document.body.appendChild(link);将a标签追加到body中，再触发点击事件，达到文件下载目的。
若有打不开或者乱码的情况，看看type与后端是否一致，以及多与后端沟通。

封装的表单组件重置功能

1.要在el-form-item里面添加对应的prop属性，resetFields方法才会生效
2.重置不是将表单项都清空，而是恢复到初始值（就是恢复到父组件传进来的值）

el-table操作列flex布局问题
使用了show-overflow-tooltip为true时，对应的高不变（不换行），因此操作那一列的按钮就一行显示，有些按钮会被因此，因此要注意

单选框在表单内部靠左对齐

文字居左对齐

.configForm /deep/ .el-form-item__content {
  text-align: left;
}

后台返回完整图片（随机图片验证码）

不用请求额外请求接口
直接将接口路径作为图片路径

<img :src="codeImgUrl" alt="图片验证码" srcset="" @click="getCaptchaCode" />
// 获取验证码
    getCaptchaCode() {
      this.codeImgUrl = `/portal/captcha?${Math.ceil(Math.random() * 10)}`;
    },

图片处理
后端直接返回图片，请求添加类型控制，返回二进制再转base64

responseType:'arraybuffer'

使用iframe预览pdf文件，但禁止下载（隐藏工具栏）

this.priviewUrl = `${value}?page=hsn#toolbar=0`;
在文件路径后面拼接上‘?page=hsn#toolbar=0’