526互联

Vue3 + element-plus使用注意

发布时间 2023-04-26 09:59:09作者: rachelch

1.给组件设置ref="xxx"

例如：

 <el-table
    ref="tableRef"

定义tableRef时，需要注意尽量使用 ref() 而非 ref(null)

const tableRef = ref();

因为使用ref(null）会得不到$el的相关属性，即 undefined

例如：表格自适应高度

const tableRef = ref();
const setTableHeight = () => {
  if (_options.value.calculateHeight) {
    let top = tableRef.value.$el.offsetTop;
    let decreaseDistance = 56;
    if (_options.value.showPagination) {
      decreaseDistance = 90;
    }
    let height = document.body.clientHeight - top - decreaseDistance;
    _options.value.height = height;
    _options.value.maxHeight = height;
  }
};
onMounted(() => {
  setTableHeight();
  window.addEventListener('resize', () => {
    setTableHeight();
  });
});
onUnmounted(() => {
  window.removeEventListener('resize', () => {
    setTableHeight();
  });
});