一、ElementUI 弹框内图片预览遮罩显示到了最外层
只需要在图片预览弹框组件上添加:append-to-body="true"就行
<el-upload
ref="licenceUpload"
action="xxx"
:limit="6"
multiple
list-type="picture-card"
:http-request="uploadImg"
:before-upload="beforeAvatarUpload"
:before-remove="beforeRemove"
:on-preview="handlePictureCardPreview"
:file-list="showList">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :append-to-body="true" :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
二、Element UI input输入框无法输入
遇到一个问题，进行数据更改操作时，弹框内数据可以正常渲染，但是无法输入。原因是这个输入框绑定的值嵌套比较深，数据回显时赋值写的有问题。
data() {
return {
form:{
a:undefined,
b:[{c1:undefined,c2:undefined}]
}
}
},
methods: {
// 数据回显事件
handleUpdate(){
// 可能会出问题的赋值（普通层级类似a这种不会出问题，但是b里面的c1、c2会出问题，输入框无法输入）
this.form.a = 123;
this.form.b = [{c1:1,c2:2}]
},
}
<form>
<el-form-item prop="a" >
<el-input v-model="form.a" type="number"></el-input>
</el-form-item>
<template v-for="(item,index) in form.b" :key="index">
<el-form-item :prop="'b.' + index + '.c1'" :rules="{required: true, message: 'c1不能为空', trigger: 'blur'}">
<el-input v-model="item.c1" type="number"></el-input>
</el-form-item>
<el-form-item :prop="'b.' + index + '.c2'" :rules="{required: true, message: 'c2不能为空', trigger: 'blur'}">
<el-input v-model="item.c2" type="number"></el-input>
</el-form-item>
</template>
</form>
上述错误赋值会因为组件嵌套太深，导致无法组件无法刷新，正常写法如下：
//方法一
let formData = {a:123,b:[{c1:1,c2:2}]};
this.form = formData;
//方法二
this.form.a = 123;
this.$set(this.form,'b',[{c1:1,c2:2}]);
三、Element UI 表格数据为空时显示图片
Element UI 表格没有数据时会默认展示“数据为空”的文字，文字可以替换，用图片替换他会更好看
<el-table>
<el-table-column>
</el-table-column>
<div slot="empty" class="empty">
<img :src="emptyImg"/>
<!-- <span>更改的文字</span> -->
</div>
</el-table>
四、Element UI 表格数据为空时显示图片有滚动条时图片居中问题
Element UI 表格没有数据时的默认展示会居中显示，但是假如表头很长时，我们看到的效果就是没有居中，图片会跟随滚动条移动
解决方案：数据为空时，表格主体宽度设为100%，而让表头滚动起来
.el-table{
/* 表格滚动条样式优化 */
.el-table__body-wrapper::-webkit-scrollbar-track-piece,.el-table__header-wrapper::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
.el-table__body-wrapper::-webkit-scrollbar,.el-table__header-wrapper::-webkit-scrollbar {
height: 6px;
width: 6px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb,.el-table__header-wrapper::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
/* 表格数据为空默认图片样式 */
.el-table__header-wrapper{
overflow-x: auto;
}
.el-table__empty-block {
width: 100%;
min-width: 100%;
max-width: 100%;
.el-table__empty-text{
.empty{
display: flex;
img{
display: block;
margin: auto;
}
}
}
}
}
/* 表格数据不为空时移除表头滚动 */
.el-table--enable-row-transition{
.el-table__header-wrapper{
overflow-x: hidden;
}
}
.el-table::before{
display: none;
}
五、Element UI 中的 table 组件条件区块不显示
错误代码如下,条件不生效的原因是slot-scope只能有一个
<el-table>
<el-table-column
v-for="(item, index) in list"
:key="item.id"
align="center"
min-width="100"
>
<template v-if="item.hasVal!=1" slot="header">
<span
>{{ item.name}}<br />{{
item.name2 ? "(" + item.name2 + ")" : ""
}}</span
>
</template>
<template v-else slot="header">
<span>{{ item.name}}</span>
</template>
<template v-else-if="item.hasVal!=1 && scope.row.createTime == '最大值'" slot-scope="scope" >
<span v-if="scope.row.reportList[index].maxValue !== undefined" >
{{ scope.row.reportList[index].maxValue }}
</span>
<span v-else>- -</span>
</template>
<template v-else-if="item.hasVal!=1" slot-scope="scope" >
<span v-if="scope.row.reportList[index].maxValue !== undefined" >
{{ scope.row.reportList[index].maxValue }}
</span>
<span v-else>- -</span>
<br>
<span v-if="scope.row.reportList[index].minValue !== undefined" >
{{ scope.row.reportList[index].minValue }}
</span>
<span v-else>- -</span>
<br>
<span v-if="scope.row.reportList[index].avgValue !== undefined" >
{{ scope.row.reportList[index].avgValue }}
</span>
<span v-else>- -</span>
</template>
</el-table>
正确代码如下，可以将条件区块放到一个slot-scope中，用template隔开
<el-table>
<el-table-column
v-for="(item, index) in list"
:key="item.id"
align="center"
min-width="100"
>
<template v-if="item.hasVal!=1" slot="header">
<span
>{{ item.name}}<br />{{
item.name2 ? "(" + item.name2 + ")" : ""
}}</span
>
</template>
<template v-else slot="header">
<span>{{ item.name}}</span>
</template>
<template v-if="item.hasVal!=1" slot-scope="scope" >
<template v-if="scope.row.createTime == '最大值'">
<span v-if="scope.row.reportList[index].maxValue !== undefined" >
{{ scope.row.reportList[index].maxValue }}
</span>
<span v-else>- -</span>
</template>
<template v-else>
<span v-if="scope.row.reportList[index].maxValue !== undefined" >
{{ scope.row.reportList[index].maxValue }}
</span>
<span v-else>- -</span>
<br>
<span v-if="scope.row.reportList[index].minValue !== undefined" >
{{ scope.row.reportList[index].minValue }}
</span>
<span v-else>- -</span>
<br>
<span v-if="scope.row.reportList[index].avgValue !== undefined" >
{{ scope.row.reportList[index].avgValue }}
</span>
<span v-else>- -</span>
</template>
</template>
</el-table>
六、Element UI 中的 table 有滚动条时el-table__body-wrapper没有铺满
table设定height时，内容超出显示时会显示滚动条。但是当一开始表格没有数据时，更改查询条件获取到数据后，有滚动条时el-table__body-wrapper没有铺满。解决方案如下：
this.$nextTick(()=>{
this.$refs.mainTable.doLayout()
})
在查询数据后执行上述操作，让table重新加载。（其中table是绑定在表格上的ref）
