element表格高度自适应的问题

最新推荐文章于 2024-05-30 11:27:58 发布

亦亦1

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量240

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_51033179/article/details/127867931

版权

const tableHeight = ref(520);

const onResize = () => {
  
 
   const clientHeight = shouldJoinUsersRef.value
      ? shouldJoinUsersRef.value.clientHeight
      : 847;


  const height = clientHeight - 320;

  tableHeight.value = height;
};

window.addEventListener('resize', onResize);

onMounted(() => {
  onResize();
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', onResize);
});

watch(
  tableHeight,
  (value) => {
    nextTick(() => {
      multipleTable.value
        && multipleTable.value.layout
        && multipleTable.value.layout.setHeight(value);//根据element源码找到的钩子函数
    });
  },
  {
    immediate: true,
  },
);

 <div
    v-if="visible"
    ref="shouldJoinUsersRef" >//这个是最外层的大盒子
<el-table
            ref="multipleTable"
            :data="tableDatas"
            :height="tableHeight"
            :header-cell-style="{ background: '#F5F7F9', color: '#666' }"
            style="width: 100%"
            row-key="subjectID"
            tooltip-effect="dark"
            header-row-class-name="manager-header"
            @selection-change="handleSelectionChange"
          >
</el-table>
</div>