首页 > 其他分享 >Vue3 + element-plus使用注意

Vue3 + element-plus使用注意

时间:2023-04-26 10:02:01浏览次数:40  
标签:setTableHeight tableRef value height plus Vue3 element ref options

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

 

标签:setTableHeight,tableRef,value,height,plus,Vue3,element,ref,options
From: https://www.cnblogs.com/rachelch/p/17354765.html

相关文章

  • Element-Plus中表格的使用
    table的使用基础使用el-table是整个表格,其中的data是整个列表要展示的数据。一般我们使用表格所展示的内容都是数组嵌套对象的形式,width就是指定整个表格的宽度,也就是基础的css样式。其中每一列使用el-table-column来包裹,在el-table-column中prop表示数组中每一项元素的建,label......
  • Element之container容器布局
    作用:用来快速搭建页面基本结构<el-container>:最外层容器标签<el-header>:头部容器标签<el-aside>:侧面容器标签<el-main>:主要内容容器标签<el-footer>:底部容器标签注:以上标签采用的是flex弹性盒布局,本人还是比较喜欢用的(不会的可以去搜索相关教程,还是比较实用的)常见......
  • vue 使用Element 的form表单如何校验对象中的对象属性?
    1、校验对象中的对象属性,需要特殊处理下:<templatev-if="form.dataType===0"><el-form-itemlabel="芯片类型"prop="configExtend.schemeVersion"><el-selectv-model="form.configExtend.schemeVersion&quo......
  • D. Remove One Element(前缀最大+简单状态机)
    题目D.RemoveOneElement题意输入n(2≤n≤2e5)和长为n的数组a(1≤a[i]≤1e9)。从a中去掉一个数(也可以不去掉)。输出a的最长严格递增连续子数组的长度。思路一种方法是前缀最长和后缀最长,加起来。这种方法比较简单。用状态机来写,定义f[i][0/1]分别表示前缀......
  • vue3+vite自适应PC端
    1、下载包pnpmaddlib-flexible-computerpostcss-px2rempx2rem-loader-D2、在main.ts里引入import"lib-flexible-computer";3、在vite.config.ts写入importpx2remfrom"postcss-px2rem"css:{postcss:{plugins:[px2rem({......
  • CI Plus简介
    CIPlus简介CIPlus是数字电视机顶盒(STB)和电视(TV)中常用的一种条件接入机制。它通过智能卡(smartcard)对接收机进行认证和授权,使其能接收加密的付费电视节目信号。CIPlus由法国的数字电视行业协会DVB开发,已成为数字电视ConditionalAccess的标准机制,广泛应用于欧洲、中......
  • Vue3中slot插槽使用方式
    **********************************Vue3中slot插槽使用方式****************************************************参考:https://huaweicloud.csdn.net/638eab83dacf622b8df8d08c.html<templatev-slot:isFang></template>简写v-slot:isFang#isFang<template#isFan......
  • vue-element-admin报错Error: error:0308010C:digital envelope routines::unsupporte
    安装vue-element-admin报错 nodejs  Node.jsv18.15.0  opensslErrorStack:['error:03000086:digitalenveloperoutines::initializationerror'],library:'digitalenveloperoutines',reason:'unsupported',code:'ERR_OSSL......
  • sqlplus工具迁移数据经验
        需要紧急把测试服务器数据迁移到pc机用于演示,但pc机无网络又没有客户端工具,只能使用sqlplus,且导出得文件又是sql文件,失去工具支持导入共过程遇到很多问题,如乱码问题,sql文件中特殊字符,日志存放和查看,导出文件不能写入,安装过程目录写入权限等大小问题。希望通过这篇博客把......
  • Element UI 中 el-input 按下回车键会刷新页面的原因及解决方法
    【问题描述】在需求开发的过程中遇到了一个奇怪的问题:点击弹窗开启表单,分明没有添加任何键盘事件,但在按下回车键时会让页面自动刷新,因此影响到了其他功能。 【产生原因】查阅资料后得知,当el-form表单里只有一个 el-input时,按下回车建会自动触发页面提交功能,因此导致了页......