Element ui plus 中 table scroll 自动触底

April_zk2024-03-04 14:37

Element ui plus 中 table scroll 自动触底

场景：添加客户等级的时候，新增的客户等级 input 框被 scroll 遮挡、重叠，需要保证 scroll 保持在最底部接可以解决遮挡、重叠。

el-table 在设置了 height 后，会选择将 table 表头固定

jsx 复制代码

<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 然后并重新赋值

jsx 复制代码

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 滚动到底部，选择执行的时间即可；我这里是在添加客户等级的时候进行执行的。

jsx 复制代码

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()
  })
};

然后就解决了👌