Element ui plus 中 table scroll 自动触底
场景:添加客户等级的时候,新增的客户等级 input 框 被 scroll 遮挡、重叠,需要保证 scroll 保持在 最底部接可以解决 遮挡、重叠。
el-table 在设置了 height 后,会选择将 table 表头固定
<el-table :height="tableData.length*40+50>tableHeight?tableHeight:tableData.length*40+50" :data="tableData"
style="width: 100%;"
ref="TableRef"
:cell-style="{ textAlign: 'center' }"
v-loading="loading"
:header-cell-style="{ 'text-align': 'center',background: '#f9f9f9', color: 'black',padding:'16px 0px'}"
>
//table 中的其他内容
</el-table>
获取table内部的 scroll dom 然后并重新赋值
const TableRef = ref()
function scrollBehavior(e) {
const dom = TableRef.value.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
// 父容器高度 + 子容器距离父容器顶端的高度 = 子容器可滚动的高度
const {clientHeight, scrollTop, scrollHeight} = dom
if (clientHeight + scrollTop !== scrollHeight) {
dom.scrollTop = dom.scrollHeight
}
}
scrollBehavior 方法就是将 scroll 滚动到底部,选择执行的时间即可;我这里是在添加客户等级的时候进行执行的。
const addNewTableItem = () => {
if (isAdd.value) {
ElMessage.warning(i18n.global.t('common.cds49'))
return
}
isAdd.value = true;
isEdit = true;
tableData.value.push({
name: "",
age: 0,
address: "",
editing: true,
});
//操作真实dom
nextTick(() => {
scrollBehavior()
})
};
然后就解决了👌
版权归原作者 April_zk 所有, 如有侵权,请联系我们删除。