vue-element ui踩坑

1,016 阅读2分钟

1.element-ui前端UI组件框架,在使用表格组件时,在使用固定列和水平方向的滚动条时,当滚动条从有到无的情况下,刚好滚动条消失的一瞬间,固定列的最后一行会出现一条高度为1px的线条,且内容会被遮住

原来在滚动条消失的一瞬间,固定列的高度会变小。所以我的解决方案就是: .el-table__fixed-right{ height: 100% !important; }

2. DropDown组件使用时,子选项无法绑定事件的处理

问题描述:正常在vue+element-ui项目中,点击事件可以通过@click绑定成功(@click=‘fun’);但是在elementUI --DropDown组件的子组件上绑定click事件时,用@click=‘fun’无法绑定成功 解决方案:使用DropDown组件绑定点击事件时,需要加 .native 才能绑定成功,即 @click.native=‘fun’ ,即可成功

3.vue+element-ui项目中绑定事件,如果原生方法不起作用,可以优先考虑使用加.native限制符的方法使用,一般都能解决

4.写key属性可以解决v-if在列上不生效,导致页面卡死的问题

5.在使用element-UI的select框时,当选中值,会触发@change事件,下拉框消失,但是这时候select框还是处于获取焦点状态。可以看到select框还是处于颜色高亮状态。所以当我再次点击enter框时,下拉框再次显示,也会再次触发@change事件。

解决办法:给select框绑定disable,判断条件给disable赋值true或者false。

6. element走马灯--取消自动播放

用官网上提供的autoplay不起作用,将interval设置为0方可

7.element admin 分页

image.png

pageSizes 数据要有一个初始值10 或者其他 不改变的话 默认是10(一页显示10条数据)

7.日期组件 DateTimePicker 格式问题

image.png

8.单独页面修改el-dialog样式的方法(增加父级选择器)

父级新增class="add-dialog"
.add-dialog .el-dialog {
margin: 5vh auto !important;
}
.add-dialog .el-dialog__body {
height: 70vh !important;
overflow: auto !important;
}