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} = domif (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,});//操作真实domnextTick(() => {scrollBehavior()})
};

然后就解决了👌