Element的el-table-column设置为fixed=“right“时的高度不正确问题

        vue2+element-ui,我们一般针对el-table-column设置fixed="right"来固定展示按钮列。当切换到别的标签页再切换回来,按钮列的高度会变小导致按钮的下半部分显示不全:

        F12查看元素后,我尝试在App.vue的css中加入以下样式来解决问题:

.el-table__fixed-right {
    height: 100% !important;
}

        这确实解决了按钮显示不全的问题,但是加入之后,高度由固定值改为动态计算会导致从别的标签页切换回来时,表格的加载过程中,按钮列部分的加载会有剧烈的抖动现象(截了好几次才截到,你可以加一下这个样式去实际1体验下,真的非常严重):

        这当然不行,于是我又查看了Element的文档,想起来了Table组件还有这么一个方法:

        于是我在保留了App.vue中加入的样式之外,又在Vue-Router特有的activated钩子中加了这段代码:

activated() {
    this.$refs.tableRef.doLayout()
},

        效果很不错,按钮显示完整,抖动也没有了,问题完美解决!

下面表格solveFlag只有Y或N两个值,为N整条数据背景颜色改为红色 <el-table :data="tableData" style="width: 100%" :highlight-current-row="true" max-height="750px" class="custom-table"> <el-table-column type="index" label="序号" width="40" :index="1"> </el-table-column> <el-table-column prop="alarmTimeKey" label="异常标识码" width="205"></el-table-column> <el-table-column prop="issueType" label="异常类型"></el-table-column> <el-table-column prop="factoryName" label="工段"></el-table-column> <el-table-column prop="alarmType" label="异常来源"></el-table-column> <el-table-column prop="alarmId" label="异常项目"></el-table-column> <el-table-column prop="alarmLevel" label="异常等级"></el-table-column> <el-table-column prop="machineName" label="设备"></el-table-column> <el-table-column prop="lotName" label="批次号"></el-table-column> <el-table-column prop="processOperationName" label="站点"></el-table-column> <el-table-column prop="processFlowName" label="工艺流程"></el-table-column> <el-table-column prop="productSpecName" label="产品料号"></el-table-column> <el-table-column prop="alarmComment" label="异常描述" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="reasonCodeType" label="异常CODE类型"></el-table-column> <el-table-column prop="reasonCode" label="异常数据"></el-table-column> <el-table-column prop="solveFlag" label="是否处理"></el-table-column> <el-table-column prop="solveUser" label="处理人员"></el-table-column> <el-table-column prop="solveReason" label="处理备注" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="endTime" label="异常开始间"></el-table-column> <!-- <el-table-column prop="startTime" label="异常开始间" width="200">--> <!-- <template slot-scope="scope">--> <!-- <span>{{ scope.row.startTime }}</span>--> <!-- </template>--> <!-- </el-table-column>--> <el-table-column prop="endTime" label="结案间"></el-table-column> <!-- <el-table-column prop="endTime" label="结案间" width="200">--> <!-- <template slot-scope="scope">--> <!-- <span>{{ scope.row.endTime }}</span>--> <!-- </template>--> <!-- </el-table-column>--> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" >修改 </el-button> </template> </el-table-column> </el-table>
03-11
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值