element-ui 使用时遇到的一些坑

element-ui,是一款基于vue2.0的快速构建框架的前端组件。使用起来方便快捷,非常适合快速开发。但是,使用别人的通用组件有一个通病,那便是,做自己的项目常常会有自己的需求,是和组件组件本身相冲的。这时候的你就会陷入是无尽的烦恼中,如何既可以使用这个组件又可以达到自己想要的效果。这里我开设一个帖子,来记录我在项目开发中使用element-ui所遇到的坑,及解决方法。

1.tree组件中识别不了类似React的jsx语法

element-ui 使用时遇到的一些坑_第1张图片

解决方法:下载以下包即可 

npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  --save-dev

下载完成后,在'.babelrc' 添加即可

"plugins": ["transform-vue-jsx"],

2. 使用Form表单时,Cannot read property 'resetFields' of undefined 问题

原因:mouted加载table数据以后,隐藏的弹出框并没有编译渲染进dom里面。

解决方法:

1、($nextTick dom下一次更新之后)

element-ui 使用时遇到的一些坑_第2张图片

2、(如果是第一次就点击新增就没必要reset, 根据元素undefined判断)

element-ui 使用时遇到的一些坑_第3张图片

3.使用el-dialog 遮罩层把显示内容遮住了

原因: Dialog 的外层布局的 position 值为 fixedabsoluterelative 三者之一时,就会出现被蒙板遮住的情况。

解决方法:

4.使用el-select 不能继承父元素的宽度 

原因:el-select 本身是  inline-block

解决办法:给el-select 元素加行内 控制其宽度。

5.Upload文件上传

解决方法:给标签加上before-upload属性

6.使用table表格自定义多选框时,@row-click@selection-change耦合

解决方法:

element-ui 使用时遇到的一些坑_第4张图片

你可能感兴趣的:(前端)