element-ui 开发过程中碰到的坑

记录背景:

最近公司一个项目需要用到开源ui,再次使用element-ui,有些场景和之前不太一样,发现了一些小坑,后续发现会一一记录

1:transition 过渡效果

过渡效果相信前端开发都是无法避免的,在使用el-collapse-transition展开折叠效果的时候发现这个效果只过渡内部盒子的实际高度,如果盒子排版的时候带的有margin/padding之类的样式,会导致下面的内容在过渡完盒子本身高度后产生页面跳动的问题。即使给盒子设置固定高度再加padding也不行

解决方案:给使用过渡效果的盒子加div::before、div::after撑起盒子高度代替margin/padding,使过渡达到理想效果

2:dialog里面的表单搜索重置失败

需要手动把搜索绑定的数据置空才能重置成功,直接resetFields()是不会成功的

3:table组件渲染之后有时会出现右侧操作列最下面一个按钮只显示一半的情况

需要table在父盒子中加入以下样式

/deep/ .el-table__fixed-right{
    height: 100% !important;
  }

你可能感兴趣的:(elementui,js,html,css3)