开发中遇到的 Element 相关问题,记录:

问题: 单独引入 Message 组件,项目开始会自动弹一次 message

解决办法:

import { Message } from 'element-ui'
Vue.component(Message)
Vue.prototype.$message = Message

ElementUI el-table 在flex下的宽度自适应问题

问题描述:

在flex容器下面的一个flex:1的子容器里面写了个el-table用来展示列表数据,在做宽度自适应测试的时候发现该组件的宽度只会增加不会缩小。

问题原因:

通过控制台发现组件生成的table的宽度是动态计算的,翻查源码,发现以下代码段

// table.vue
if (this.fit) {
  addResizeListener(this.$el, this.resizeListener);
}

// resize-event.js
export const addResizeListener = function(element, fn) {
  if (isServer) return;
  if (!element.__resizeListeners__) {
    element.__resizeListeners__ = [];
    element.__ro__ = new ResizeObserver(resizeHandler);
    element.__ro__.observe(element);
  }
  element.__resizeListeners__.push(fn);
};

也就是说,组件的resize事件是绑定在this.$el上了,这应该就是的原因所在了。flex容器下的width:100%会一直向上继承,直到flex容器下第一级子元素,但是当某个子元素的宽度出现固定值并且大于flex伸展的宽度的时候,那么容器就不会收缩,自然也就触发不了resize事件了。

解决办法:

可以将设置了flex属性的容器设置position:relative,然后在子元素加多一层div包裹内容,设置position:absolute; width:100%;继承父级宽度,那么内容也会继承该div的宽度了。

参考链接

ElementUI el-table 在flex下的宽度自适应问题open in new window

el-tooltip 不能按预期显示

问题描述

hover 时未显示

问题原因

通过开发者工具的元素选择器选择时发现不能直接选取到该元素, 另一元素盖在该元素上方

解决办法

给触发元素设置 position: relative; z-index: 2; ,使其支棱出来😅

el-scrollbar 的问题

  1. 外部容器尺寸变化的时候不能很好的重新渲染
  2. 横向滚动条默认显示会遮挡内容

总之用来做没什么变化的竖向滚动容器还可,稍复杂需求就不建议用了,比原生滚动条的优势就是鼠标hover的时候才显示滚动条。至于滚动条样式,原生滚动条样式也是可以修改的,所以也就那样。

MIT Licensed | Copyright © 2017-present 进击的学霸, 自豪的使用 七牛云,已加入十年之约