Element-UI相关问题

1. 解决vue和element UI中对话框的遮罩层消失

解决vue和element UI中对话框的遮罩层消失，在el-dialog标签里添加 :modal-append-to-body='false'

错误分析

1）若el-dialog弹出框设置了modal-append-to-body='true'（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级）

2）el-dialog的显示层和遮罩层都设置了position:fixed，当然显示层的z-index肯定要比遮罩层的大，才能正常的显示弹出框。问题就出在此处，若el-dialog的父级也设置了position:fixed，并且其z-index比弹出框的遮罩层的小（遮罩层处于更高一层），那么弹出框的内容就会被遮罩层所遮挡住了

3）el-dialog的父级元素确实设置了position:fixed，并且其z-index比弹出框的遮罩层的小，所以就会出现遮罩层把内容挡住的问题

解决办法

1）给el-dialog设置modal-append-to-body=“false”，使遮罩层插入至 Dialog 的父元素上

2）给position:fixed的父元素设置一个z-index，并且要比遮盖层的大

3）el-dialog父元素不使用fixed定位

2. Element UI Upload 上传文件只能上传一次 ，再次点击上传后无反应的问题

2.1. 方法一：

 <el-upload
    class="upload-demo"
    action=""
    :limit="1"
    :show-file-list="false"
    :http-request="uploadLogo"
    ref='upload'
    :on-success="handleSuccess"
>
  <el-button style="width: 150px; height: 35px;line-height: 0;margin-left: 20px" size="medium"
             type="primary">
      {{$t('StaffManage.bulkImport')}}
  </el-button>
</el-upload>

解决：

1. 添加属性
ref=‘upload’
:on-success=“handleSuccess”

2. 上传成功 - 删除之前的历史记录
handleSuccess(res, file) {
  this.$refs.upload.clearFiles(); //上传成功之后清除历史记录
  this.handleInitTableData();  //初始化表格数据
},

3. elementui textarea 高度autosize 编辑时候没有问题，渲染文本高度出现滚动条

在el-input中设置type=“textarea”，通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 autosize 还可以设定为一个对象，指定最小行数和最大行数。

原理：其实autosize就是给文本框设置最小高度和高度样式来自适应

注意：如果设置了autosize属性，rows='n'方法就不生效了，但是可以通过赋值:autosize="{ minRows: 1 maxRows: 100}"设置最小行数和最大行数

问题：我设置了maxRows为100，但是在谷歌和edge浏览器上输入内容不到10行就出现了滚动条，但是IE浏览器正常，没有出现滚动条；

.el-textarea__inner{
    overflow: hidden !important;
 }