加载elementor时出现问题_vue+elementUI遇到的问题

二次封装el-dialog中遇到的问题和解决：

dialog的显示隐藏导致写在dialog内部的自定义form组件中的数据在父组件中的数据更新时得不到实时响应。

使用v-if判断显示时使用内部form组件

二次封装el-table的思路

需要传入的属性为表格配置对象(tableConfig)

其中包括表格常用属性、表头(header)、内容数据(data)、操作按钮(options)、事件(methods)

某一项是否需要hidden，目前是在header中的每一项添加hidden属性，这样做并不好，考虑改为设置一个单独的hiddens数组，将需要hidden的该项的props写入，统一管理，渲染的时候只需要过滤掉hidden数组中的props，这个过程可以在computed中处理，简化template的复杂程度，个人感觉比每一项添加hidden属性，使用if判断这种方法更好

值得注意的是：

(1)表头是固定的，由于table是按列渲染，data即为该表格中需要的tableData，所以表头中的项数为该表格的列数。此处不要忘记操作按钮的存在，由于表格中所做基本操作为增删改查，并且操作按钮多放在最后一列，此处将操作按钮单独作为表格配置的一项options存在。

(2)由于表格中的单独的某一列可能需要实现点击跳转，可以类比操作按钮，给单独的这一项中传入option配置，但是如此配置会影响表格该列的排序，表格提供的sortable，会显示不出排序按钮。目前所做处理是，需要同时满足排序和点击跳转的列使用表格提供的单个单元格被点击触发的事件cell-click，结合cell-class-name更改需要被点击的列的事件处理和样式添加

3. 二次封装el-form的思路

父子组件数据实现数据实时响应可以在子组件中使用watch监听父组件传入的props，改变后实时给子组件中的对应属性赋值

初始化校验规则需要在created钩子中，在mounted中容易识别不出来

4. echarts的使用

切换tab造成的图表显示不全的问题

需要在点击tab切换的时候重新初始化图表，即调用echart的resize方法

宽度自适应屏幕：

需要在setOption使用之后添加window.onresize()事件，在里面执行myEchats.resize()

折线图堆叠的解决方式：

在series中的每项去掉stack属性即可(其他方式：将stack的属性值改为不一样的 ps：暂未尝试，不知是否可行)

图表x轴上的内容全部显示：interval: 0

5. 路由懒加载引发的问题：

Loading chunk {n} failed

router.onError中强制刷新页面

6. element-ui中排序的问题：

后端返回数据为字符串，导致排序错乱，同时需要注意sortable的值，为true时前端排序，为‘costom’时可结合sort-change事件实现后端排序，此处需要注意sort-change事件是写在el-table上的

7. select组件在页面显示自动触发验证的问题：

表单需要重置校验this.$refs.form.resetFields();

此处需要注意：

如果是弹窗出现表单的话，重置校验的操作最好是在this.$nextTick中执行，保证表单元素挂载完毕

8. 当 el-form 表单内只有一个 el-input 输入框时，在输入框内回车就会触发表单的提交事件，触发页面刷新

在 el-form 上加上 @submit.native.prevent 属性就可以阻止回车提交事件