vue+element-ui问题以及解决汇总

916 阅读2分钟

1. 从详情页返回列表页时会出现页面卡住情况:

问题描述: 在通过el-tabs页面跳转至详情页,再返回时会出现页面崩溃情况

问题来源: element-ui自身bug

解决办法:(1)降低版本(2)需要在el-tabs用el-row和el-col将其包裹。

2. 对于v-for循环出的列表加上查看更多和收起的功能的实现:

问题来源: 需解决各自列表的变量控制

解决办法: 利用index值创建数组变量,将对应的index位置赋值各自的变量showMore = false为默认值。再用两个方法,查看更多时:showMore = true;收起时showMore = false。关键点在于要获取到循环变量的长度,进行赋值。需用到Watch方法监听。另一个需注意的点是,对于数组中的变量赋值,要考虑到方法是否是实时更新的。

补充:vue中数组或对象实时更新的方法:(1)内置方法(2)vm.set或$set

代码如下:

image.png

image.png

3.排序问题

(1)上移

Image.png

(2)下移

Image.png

4.VUE Element Tab Echarts 宽度 百分百 变成 100px的问题

问题描述: vue+element项目中使用到了tab切换选项卡,其中有一个tab下的内容是echarts,出现了echarts宽度缩减为100px无法继承100%属性。

问题: 总结就是,echarts渲染时tab选项卡display为none,所以width:100%没有可继承项,被echarts自带方法切割成100px。

解决思路: 销毁组件,在tab选项卡被选中时重新渲染组件,这个时候就会有宽度继承。

解决: 通过 v-if 重新渲染组件即可。

5.el-table跳转新窗口页面路由跳转

业务需求: 列表中点击名称跳转至新窗口的详情页。

Image.png

Image.png

6.element  el-dater-picker 清空日期后v-model的数据源会变成null,查询接口需判断是否为空!

Image.png

7.el-form 表单验证不能和v-if同时使用,会影响到validate方法中的valid为true,导致rules规则失效