Vue+ElementUI+Echarts 常见BUG问题避免

Vue+ElementUI+Echarts 常见BUG问题避免

CSS

1. Flex布局： 元素被挤压（解决：设置width或min-width, flex-shink: 0;）
2. 文字缩略： 不同浏览器兼容性不一致

ElementUI

1. el-input： 过滤空格 / 转为number类型 / enter键搜索
2. el-button： 删除（要提示） / 提交（success/error要提示）
3. el-dialog： 关闭（前） / 销毁 / 确定/取消 / append body / close-on-click-modal 是否可以通过点击 modal 关闭 Dialog
4. el-select值绑定不上（例如 0 对应 否，但展示的是 0），需将值转换为String类型

Echarts

1. 图表： 放大 / 缩小 / 重置 / 下载 / 全屏 / 自适应窗口大小等比例缩放
2. 登录与否：例如两套数据：‘全部/我’，未登录时，‘我’置灰
3. 生成可用数据：拿到后端数据后，通过前端处理下接收的数据
4. tooltip浮层样式：根据项目配色修改tooltip的extraCssText浮层样式
5. legend点击事件： myChart.on(‘legendselectchanged’, function(params) {})
6. 数据为空判断：提示无数据

锚链接

1. el-input： 过滤空格 / 转为number类型 / enter键搜索
2. el-button： 删除（要提示） / 提交（success/error要提示）
3. el-dialog： 关闭 / 销毁