1.解决动态添加表格列顺序错乱
// 等待dom更新将表格进行重新编排
this.$nextTick(() => {
this.$refs.table.doLayout()
})
2.动态添加表格列 fixed布局错乱
// 1.el-table身上加上loading属性
<el-table
ref="table"
v-loading="loading"
:element-loading-text="$t('sys.loading2')"
element-loading-spinner="el-icon-loading"
:data="tableData"
border
stripe
:header-cell-style="{ background: '#F5F7FA' }"
align="center"
style="width: 98%; margin: 0 auto"
height="100%"
>
// 2.适当时机开启loading搭配dolayout将布局重新编排,如若不使用loading遮罩效果会出现闪屏的bug
// 防止闪屏被用户看到 我们可以稍微设置延时器进行延迟loading
this.$nextTick(() => {
this.$refs.table.doLayout()
setTimeout(() => {
this.tableDivLoading = false
}, 15)
})
// 3.修改loading 遮罩层样式
// 我这里使用的scss less请使用/deep/
::v-deep .tableDiv .el-loading-mask{
height: auto;
width: auto;
top: 0;
left: 0;
background-color: #fff;
}
3.fixed状态下滚动条无法滚动
// 解决fixed下滚动条不能点击
::v-deep .el-table--scrollable-x .el-table__body-wrapper {
z-index: 1;
}