5.17开始的一个项目

1. vue-element-ui菜单左侧无法延长至屏幕最下面

2. 获取后端api

3. element-ui 里el-dialog遮罩层遮住dialog：为el-dialog添加：modal-append-to-body=false后解决

4. element-ui 里el-dialog遮罩层遮不住一些元素：登录的button不能设置position：fixed；fixed的z-index高于所有

5. checkbox默认勾选在搜索后勾选消失：把true和false转换成0和1的if语句里面不能使用本身的勾选的属性，在data中重新设置一个属性用于将true和false转换为1和0

6. 添加显示不出来的报错提醒：将字段再写一个数组，遍历并判断是否为null或undefined，若是，this.$message.error弹出提醒，且return false 结束该方法

7. element-ui里出现不明线条，发现是伪元素 利用content: none;清除伪元素

8. ivew版本问题 icon名字更改

9. v-model不能对button使用 改用el-radio

10. 附加条件没搜索时显示空白框 加v-if 搜索到父元素时，子元素再显示，不显示时边框也消失

11. location.reload() 刷新界面，类似浏览器的刷新按钮

12. 用this.$refs[formName].validate((valid) => {}) 判断表单建立成功

13. 在created中获取已有账户，保存在对象数组中，再显示到下拉菜单中，每次重新获取帐户时，清除数组中的内容

14. 利用push存数组时，先用shift方法删除数组的第一个值，因为在data里初始化了一个空对象

15. 利用cookie存储放置在顶部导航栏的 accountNum 和 brokerId ，在顶部导航栏设置cookie，每次切换账户时清除上一次的cookie，在交易配置提交时获取cookie

16. cookie中存储两个字段时不能用一条字符串拼接（只会在Application的Cookies里显示第一条），可以创建两次，就会显示两条cookie

17. 调用接口中的某一项中含有 ‘.’ ，如RB9999.SHFE时，无法直接通过.RB9999.SHFE获取后面的内容，在js中对象的属性可以通过两种方式访问：object.prpperty和object[‘property’],即通过.[‘RB9999.SHFE’]成功访问

18. 在网页显示未已登录帐号时，cookie依然会记录上一次的帐号：在生命周期created()里面获取全部帐号前先清除cookie，保证每一次刷新页面，帐号未登录时，cookie也被清除

19. 为了在登录或退出更新后再查看cookie：设置setTimeout()，并加上1s延时，在延时中更改用户登录状态

20. 如果登录，在cookie中存下用户名，在帐号登录的时候，判断cookie中是否有userName的字段，有就可以获取全部账号

21. 如果用户没登陆要清除掉之前切换过的帐号cookie，以免继续选中登录账号状态

22. 利用 provide/inject 实现无空白页刷新 在vue 2.2.0版本以后出现

23. 通过cookie记录用户登录后再获取帐号的方法不合理：更改为组件子向父传值，利用$emit，将子组件的userName传给父组件，获取登录状态及该用户的全部帐户

24. 打包至生产环境中时，所有的icon显示为小方格，在控制台network中发现路径图标与开发环境中的图标路径都不同：webpack配置问题，将webpack.prod.conf.js中
    module: {
    rules: utils.styleLoaders({
    sourceMap: config.build.productionSourceMap,
    extract: true,
    usePostCSS: true
    })
    },
    extract: true改为false (是否使用css分离插件 ExtractTextPlugin)

25. echarts 数据量过大时，datazoom滑动至天数较多的情况时会卡顿，解决办法：取消不必要的动画，
    hoverAnimation: false,
    showSymbol: false,
    animation: false,
    animationDurationUpdate: 0

26. 价格图表的y轴起点过低，价格本身不会跌那么低：加上参数
    min: function (value) {
    // y轴最小值为整条曲线最小值 -200 取整并成为100的倍数
    return (Math.floor((value.min - 200) / 100) * 100)
    }

27. echarts的图表柱状图在原点的y轴上：解决方法：将xAxis里boundaryGap: false,改为true，表示留白

28. 复制接口后，url中带有一串%E2%80%8B，手动敲接口没有问题了 搜了一下：当URL出现%E2%80%8E就代表你的URL里面有包含一个ZERO-WIDTH SPACE (ZWSP)，是肉眼无法发现的空白，ZWSP一般情况是打不出来的，但是如果你是透过WORD等等的文件编辑器复制贴上的就很有可能含有ZWSP，一般情况下ZWSP并不影响阅读但是当它变成URL的一部分，就会变成%E2%80%8E ，使你的URL错误

29. json对象格式化 JSON.stringify(value，replacer，space) 方法用于将 JavaScript 值转换为 JSON 字符串。
    value：必需， 要转换的 JavaScript 值（通常为对象或数组）。
    replacer：可选。用于转换结果的函数或数组。如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。
    space：可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

30. v-if 无法保存表格信息，再刷新影响美观，操作麻烦，改成v-show，保存表格数据，当隐藏再展开时，无需刷新
    position套的div层数过多，样式显示变乱

31. 地址栏的图标不显示：图片的格式生成为.ico,利用Windows自带的画图，16*16的大小，选择另存为bmp文件，把后缀改成.ico 依然不显示。在vue的项目中，图标一类的静态文件应该放在static文件夹中，不能放在src 中，网页把根域名作为相对路径的根目录了，然而我们文件的路径是相对于项目文件的根目录的，因此就找不到了。而static文件夹下的文件（夹）会按照原本的结构放在网站根目录下。这时我们再去使用/static绝对路径，这样就可以访问这些静态文件了。成功解决不显示的问题。在<header></header>中加入：
    <link rel="shortcut icon" type="image/x-icon" href="static/img/favicon.ico"/>

32. position套的div层数过多，样式显示变乱

33. 封装图表组件，利用ref,让父组件点击按钮时，将参数传递给子组件，子组件运行fetchChart函数，获取图表
    <Charts ref="fetchChart"></Charts> 为子组件注册fetchChart
    this.$refs.fetchChart.fetchChart(params)父组件向子组件传递参数事件等
    第一个fetchChart是53行子组件注册的上面的fetchChart 第二个fetChart是子组件Chars的fetchChart方法

34. 设置一个动画图片时，引入的图片不显示：在vue中使用<img>标签，里面的地址要写成动态地址，<img :src="imgUrl" alt="图片显示失败" class="jump1"> 在data中写入图片地址

35. 打开vscode之后eslint当语法格式错误时只在控制台警告，代码里不出现红色提示了：在setting.json 中添加配置项：

{
	 "eslint.validate": [
  	 "javascript",
 	  "javascriptreact",
	   "html",
  	 "vue"
｝

35. 侧边菜单栏展开收起卡顿问题：.horizontal-collapse-transition { transition: 0.3s width ease, 0.3s padding-left ease, 0.3s padding-right ease;} 覆盖element-ui原本的样式 在dom中折叠前先将文字的span display：none，就不会出现卡顿的现象
36. 键盘左右键控制图表不用返回翻页，在mounted中全局监听键盘事件（vue中取消了键盘码，用名字代替，如e.code === ‘ArrowLeft’），从前的参数依靠表格的属性params.row，后来改为直接从后端获取的数据searchData。searchData总体上是一个数组，利用searchData可以实现切换下一条，而params.row仅为当前条，无法实现切换，缺点是searchData没有像params.row一样的索引，先获取到params.row的索引，再为searchData的每一项都添加index索引值即可实现切换上下条数据。除了用键盘控制，还可以用鼠标点击charts组件中的按钮也可以实现无返回切换表格。将父组件中存的当前条的索引传到子组件，子组件进行增减后，再执行获取图表的函数（fetchCharts),即可实现
37. 打开vscode之后eslint当语法格式错误时只在控制台警告，代码里不出现红色提示了：在setting.json 中添加配置项：{
    “eslint.validate”: [
    “javascript”,
    “javascriptreact”,
    “html”,
    “vue”
    ｝
38. 在一个函数里把params的值存在data中，在mounted中打印出来还是初始值：把mounted改为updated解决
39. 在vue中，函数防抖的使用方法有所不同 使用方法：pageChange: debounce(function (changeDirection) {} ), 300) 按从前的正常写在函数里的写法，防抖会不生效 详解： https://www.jianshu.com/p/3e8aa4b1aeb1
40. _ishover错误 将数组直接赋值改为用 push() 方法
41. iview为表格某个单元格修改样式不生效，将样式类写到app中，scoped导致样式不生效
42. 同一页面，两个表格，分别在抽屉里放echarts，只能显示一个：echarts使用同一个option，每次渲染的id要不同，令父组件写好id传到charts组件，把id赋给子组件，并设置高宽让echarts在其内部渲染
43. 表单验证失败问题1：判断数值类型时只写type: ‘number’，即使填的是数字，在验证时还是不会通过，因为input框内默认为string，可以再加上
    transform (value) {
    return Number(value)
    },
    将string转为number类型
44. 表单验证失败问题2：判断数值长度时只写max:‘10’，即使填的内容长度小于10，在验证时还是不会通过，再加上min: ‘1’,偶尔可以通过，使用正则表达式 pattern: /^\d{1,10}$/ , 就可以将表单验证控制在1-10个数字之间，表单验证也变得合理
45. echarts 鼠标移入tooltip 抖动，窗口抖动：设置tooltip的transitionDuration: 0,
46. 千分符：浏览器自带方法 .toLocaleString()
47. iview画斜线表头，用render函数，中间再加一条——————(下划线)
48. for…in 可以用于枚举对象的属性 Object.keys(obj)也可以获取对象的属性，放入数组中 Object.values(obj)获取属性的值，并存到数组
49. blob下载问题
50. 使用iview的table里带的筛选方法时，不会影响源数据data，因此，为了每一次修改完策略显示或隐藏不重新从后台获取数据，影响使用感受，在修改完数据后，应当将修改完的数据更新至data。而不是表格那一行的params.row中，否则再筛选的时候会按照没改之前筛选
51. echarts每次更改完查询条件后，上一次的连线残留到本次的图中，在setOption的时候加上true：this.myChart.setOption(this.option, true)
52. echarts 对应位置做成堆叠图，相对应的位置stack取一样的名字
    series: [
    {name: ‘winUpper’, type: ‘bar’, stack: ‘stackUpper’},
    {name: ‘winLower’, type: ‘bar’, stack: ‘satckLower’},
    {name: ‘lossUpper’, type: ‘bar’, stack: ‘stackUpper’},
    {name: ‘lossLower’, type: ‘bar’, stack: ‘satckLower’}
    ]
53. render函数里添加类时。如果style有scoped则不生效

更新于2021.7.30