1.elementui中 防止错误提示框多个弹出
可以直接调用(Message as any).colseAll()
2.el-table用v-if隐藏显示列和预期不符问题
给el-table-column加一个key属性,:key="item.id"或者其他的,确保每列的key值不同就可以了,key值唯一表识
vue会尽可能的高效的渲染元素,通常恢复已有的元素而不是从头开始进行渲染,因此使用key值可以提高渲染效率,同理,改变某一个元素的key值会使该元素重新被渲染
3.axios请求中post请求的坑
刚开始的坑是,使用axios的post方法请求数据,数据被拦截,数据一直传不到后端那边。后来查文档才得知 axios对于post请求是有拦截功能的,需要自己判断,或者使用提请的 qs 方法,将传给后端的数据进行下处理。
qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。可以进行对象与字符串之间的一个转换。
使用axios,调用后端接口时使用到的。
请求方式为post,axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urllencoded’,将对象或数组的参数使用qs.stringify()进行序列化转化
qs使用
介绍它的两个方法:stringify和parse。
qs.stringify(data)
stringify方法,是将对象序列化成url形式的字符串,以&符号进行拼接。
示例及输出效果如下:
const userObj = {name:'xiaoming',password:'123123'}
qs.stringify(userObj)
console.log('转换后的格式:',qs.stringify(userObj)
// 转换后的格式:name=xiaoming&password=123123
qs.parse(data)
parse方法,是将URL形式的字符串解析成对象
示例及输出效果如下:
import qs from 'qs'
const userStr = 'name=xiaoming&password=123456'
//qs.parse(userStr)
console.log('转换后的格式:',qs.parse(userStr))
4.路由传参的功能的坑
之前一直使用路由传参,但是当本页面刷新的时候,页面上是没有参数的,因为参数是从上个页面传入进来的。
解决办法:使用了缓存,和vuex状态管理。但是由于项目并不是很大型的项目,所以使用最多的是缓存。
5.页面缓存的坑
有个填写信息的页面,需要填写一部分信息,进入查新协议页面,返回的时候,页面上填写的信息还需要留存。 解决办法:使用vue提供的keep-alive,来完成页面的缓存的。