当前位置: 首页 > news >正文

element表单搜索框与表格高度自适应

一般在后台管理系统中,表单搜索框和表格的搭配是非常常见的,如下所示:
在这里插入图片描述
在该图中,搜索框有五个,分为了两行排列。但根据大多数的UI标准,搜索框默认只显示一行,多余的需要进行隐藏。此时的页面被上部分的搜索框和下部分的表格框所填充,如果搜索框默认显示一行,在展开下面行时,搜索框高度变化,势必要引起表格框高度的变化。此时就需要对上下两个div的高度进行计算。形成下图所示:
1.搜索框收起状态:可以看到搜索框的最右边有个向下的按钮
在这里插入图片描述

2.搜索框展开状态:最右边方向键变为向上
在这里插入图片描述
可以看到此时表格的高度是跟随着搜索框的高度变动的,两者始终保持占满整个屏幕。
光是这样还有欠缺,在页面缩放的时候,高度也应该跟着一起变动才行,如下图所示:将整个页面缩小了比例为67%,但表单与表格依然撑满整个画面。
在这里插入图片描述
首先我们使用全局element-resize-detector监听DOM元素

npm install element-resize-detector

创建mixin文件夹,里面创建一个index.js,该文件作为公共js使用,所有需要用到表单表格自适应的直接引用该文件就好。

// 引入监听并使用
import elementResizeDetectorMaker from "element-resize-detector";
export default {data() {return {tableHight: 0,      // 表格高度searchShow: false,  // 搜索表单多行隐显hight: 0,           // pageHead高度}},mounted() {this.watchSize()},methods: {// 高度监听,自适应表格watchSize() {this.$nextTick(() => {let erd = elementResizeDetectorMaker();// 页面高度监听erd.listenTo(this.$refs.pageTotal, () => { let fullHeight = document.body.offsetHeightlet tableEle = document.querySelector('.el-table')// 表格toplet { top } = tableEle.getBoundingClientRect()// 搜索框高度this.hight = this.$refs.pageHead.offsetHeight + 16// css变量定义// 注意这里的--height, 是给page.less文件的,因为很多页面需要用到改样式所以都一起封装到一个文件中了,下面会提到。this.$el.style.setProperty('--height', this.hight)this.tableHight = fullHeight - top - 85    // 这个地方的85看各人情况可以做修改});})},}
}

要想直接使用该代码,表单表格所在的页面还需要做如下配置 index.vue:

<template><div class="page-total" ref="pageTotal"><div class="page-head" ref="pageHead"><div class="head-title">表单表格高度自适应</div><!-- 搜索表单 --><div class="head-search"><el-form ref="searchForm" class="search-form" :model="searchForm" label-width="150px"><!-- 搜索框的第一排 --><el-row><!-- 这个位置放前四个搜索框,下面这个按钮就是展开收起剪头 --><el-button @click="searchShow = !searchShow; watchSize()" style="margin-left:10px;" :class="[{'el-icon-arrow-down': !searchShow},{'el-icon-arrow-up': searchShow}]"></el-button></el-row><!-- 搜索框的第二排 --><el-row v-show="searchShow"></el-row></el-form></div></div><div class="page-inner-content"> <!-- 表格 --><el-table :data="tableData" border stripe :height="tableHight"><!-- 表格内容 --></el-table></div></div>
</template><script>
// 这里需要引用才可以生效喔
import mixin from '../mixin'
export default {mixins: [mixin],data() {return {}}
}
</script>
// 引入page.less
<style lang="less" scoped>
@import '../page.less';
</style>

下面的page.less的基础架构:

.page-total{width: 100%;height: 100%;position: relative;background-color: #F5F5F6;padding: 16px;overflow: auto;.search-form{width: calc(100% - 165px);}.page-head{background-color: #fff;border-radius: 4px;padding: 0 16px;.head-search{display: flex;justify-content: space-between;}}.page-inner-content{// 这里的height变量是从mixin中获取的height: calc(100% - var(--height));background-color: #fff;margin-top: 16px;padding: 16px;border-radius: 4px;}
}

注意page.less,inde.vue,mixin三者之间的参数关联

相关文章:

element表单搜索框与表格高度自适应

一般在后台管理系统中&#xff0c;表单搜索框和表格的搭配是非常常见的&#xff0c;如下所示&#xff1a; 在该图中&#xff0c;搜索框有五个&#xff0c;分为了两行排列。但根据大多数的UI标准&#xff0c;搜索框默认只显示一行&#xff0c;多余的需要进行隐藏。此时的页面被…...

MySQL使用技巧整理

title: MySQL使用技巧整理 date: 2021-04-11 00:00:00 tags: MySQL categories:数据库 重建索引 索引可能因为删除&#xff0c;或者页分裂等原因&#xff0c;导致数据页有空洞&#xff0c;重建索引的过程会创建一个新的索引&#xff0c;把数据按顺序插入&#xff0c;这样页面…...

七大设计原则之里氏替换原则应用

目录1 里氏替换原则2 里氏替换原则应用1 里氏替换原则 里氏替换原则&#xff08;Liskov Substitution Principle,LSP&#xff09;是指如果对每一个类型为 T1 的对象 o1,都有类型为 T2 的对象 o2,使得以 T1 定义的所有程序 P 在所有的对象 o1 都替换成 o2 时&#xff0c;程序 P…...

1行Python代码去除图片水印,网友:一干二净

大家好&#xff0c;这里是程序员晚枫。 最近小明在开淘宝店&#xff08;店名&#xff1a;爱吃火锅的少女&#xff09;&#xff0c;需要给自己的原创图片加水印&#xff0c;于是我上次给她开发了增加水印的功能&#xff1a;图片加水印&#xff0c;保护原创图片&#xff0c;一行…...

Connext DDS属性配置参考大全(2)

DDSSecure安全com.rti.servcom.rti.serv.load_plugin...

一起Talk Android吧(第四百九十二回:精简版动画)

文章目录概念介绍使用方法示例代码经验总结各位看官们大家好&#xff0c;上一回中咱们说的例子是"动画集合&#xff1a;AnimatorSetBuilder",这一回中咱们说的例子是" 精简版动画"。闲话休提&#xff0c;言归正转&#xff0c;让我们一起Talk Android吧&…...

seata源码-全局事务回滚服务端源码

这篇博客来记录在发起全局事务回滚时&#xff0c;服务端接收到netty请求是如何处理的 1. 发起全局事务回滚请求 在前面的博客中&#xff0c;有说到过&#xff0c;事务发起者在发现分支事务执行异常之后&#xff0c;会提交全局事务回滚的请求到netty服务端&#xff0c;这里是发…...

【Vue3源码】第一章 effect和reactive

文章目录【Vue3源码】第一章 effect和reactive前言1、实现effect函数2、封装track函数&#xff08;依赖收集&#xff09;3、封装reactive函数4、封装trigger函数&#xff08;依赖触发&#xff09;5、单元测试【Vue3源码】第一章 effect和reactive 前言 今天就正式开始Vue3源码…...

C函数指针

函数指针是指向函数的指针变量。通常我们说的指针变量是指向一个整型、数组或字符型等变量&#xff0c;而函数指针是指向函数。函数指针可以像一般函数一样&#xff0c;用于调用函数、传递参数。函数指针变量的声明&#xff1a;typedef int (*fun_ptr)(int,int); // 声明一个指…...

2023同等学力申请硕士计算机综合国考

同等学力国考报名要开始了 2023年2月15日&#xff0c;中国教育考试网和“全国同等学力人员申请硕士学位管理工作信息平台”&#xff08;https://tdxl.chsi.com.cn&#xff0c;联系服务电话&#xff1a;010-67410388&#xff09;公布报名工作通知。考生须按照通知要求进行注册或…...

英语基础-并列句概述

什么是并列句&#xff1f;并列句就是用连词把独立的句子连接起来&#xff0c;使得句子之间产生并列的逻辑。 1. 并列句中的逻辑 1. 小明步行上学&#xff0c;小红骑自行车上班。 Ming goes to school on foot,and Hong goes to work by bike. 平行逻辑 2. 小红经常玩手机…...

大数据框架之Hadoop:HDFS(一)HDFS概述

1.1HDFS产出背景及定义 HDFS 产生背景 随着数据量越来越大&#xff0c;在一个操作系统存不下所有的数据&#xff0c;那么就分配到更多的操作系统管理的磁盘中&#xff0c;但是不方便管理和维护&#xff0c;迫切需要一种系统来管理多台机器上的文件&#xff0c;这就是分布式文件…...

20230210组会论文总结

目录 【Ultra-High-Definition Low-Light Image Enhancement: A Benchmark and Transformer-Based Method】 【ShuffleMixer: An Efficient ConvNet for Image Super-Resolution】 【A Close Look at Spatial Modeling: From Attention to Convolution 】 【DEA-Net: Single i…...

Python - 数据容器dict(字典)

目录 字典的定义 字典数据的获取 字典的嵌套 字典的各种操作 新增与更新元素 [Key] Value 删除元素 pop和del 清空字典 clear 获取全部的键 keys 遍历字典 容器通用功能总览 字典的定义 使用{}&#xff0c;不过存储的元素是一个个的&#xff1a;键值对&#…...

傻白探索Chiplet,文献阅读笔记汇总(十二)

Summary&#xff08;方便分类管理&#xff09; Article&#xff08;文献出处&#xff09; 方便再次搜索 Data&#xff08;文献数据&#xff09; 总结归纳&#xff0c;方便理解 Comments&#xff08;对文献的想法&#xff09;/Why&#xff08;为什么看这篇文献&#xff09;强…...

#电子电气架构——Vector工具常见问题解决三板斧

我是穿拖鞋的汉子,魔都中一位坚持长期主义的工科男。 今天在与母亲聊天时,得到老家隔壁邻居一位大姐年初去世的消息,挺让自己感到伤感!岁月如流水,想抓都抓不住。想起平时自己加班的那个程度,可能后续也要自己注意身体啦。 老规矩,分享一段喜欢的文字,避免自己成为高知…...

文本三剑客之grep

Grep是Linux用户用来搜索文本字符串的命令行工具。您可以使用它在文件中搜索某个单词或单词的组合&#xff0c;也可以将其他Linux命令的输出通过管道传输到grep&#xff0c;因此grep可以仅显示您需要查看的输出。grep的命令格式如下&#xff1a;grep 选项 查找条件 目标文件…...

pwn手记录题1

fuzzerinstrospector(首届数字空间安全攻防大赛) 主体流程&#xff08;相对比较简单&#xff0c;GLibc为常见的2.27版本&#xff0c; Allocate申请函数&#xff08;其中有两个输入函数Read_8Int、Read_context&#xff1b; 还存在着后门函数&#xff1b; 关键点在于如何利用…...

自动驾驶规划 - Apollo Lattice Planner算法【1】

文章目录Lattice Planner简介Lattice Planner 算法思路1. 离散化参考线的点2. 在参考线上计算匹配点3. 根据匹配点&#xff0c;计算Frenet坐标系的S-L值4. parse the decision and get the planning target5. 生成横纵向采样路径6. 轨迹cost值计算&#xff0c;进行碰撞检测7. 优…...

以太坊数据开发-Web3.py-安装连接以太坊数据

Web3.py是连接以太坊的python库&#xff0c;它的API从web3.js中派生而来。如果你用过web3.js&#xff0c;你会对它的API很熟悉。但惭愧的是&#xff0c;作为一个以太坊上Dapp的开发者&#xff0c;我几乎没有直接使用过web3.js&#xff0c;也没有看过它的API。 官网&#xff1a…...

Linux 配置文件 bashrc

本文详细介绍了Linux系统中配置文件bashrc的作用、使用方法和配置技巧。bashrc文件是bash shell在用户登录时自动执行的脚本&#xff0c;用于定义用户的环境变量和别名等个性化设置。文章首先解释了bashrc文件的重要性&#xff0c;并介绍了如何编辑和修改该文件。接着&#xff…...

从游戏排行榜到实时榜单:手把手用无旋Treap(Fhq Treap)实现一个高性能排名系统

从游戏排行榜到实时榜单&#xff1a;手把手用无旋Treap&#xff08;Fhq Treap&#xff09;实现一个高性能排名系统 在当今的互联网应用中&#xff0c;实时排名系统无处不在——从游戏中的玩家战力榜&#xff0c;到直播平台的礼物贡献榜&#xff0c;再到电商的热销商品排行。这些…...

把 SAP ABAP CDS View Code Mapping 讲透:从 SEGW 映射到 SADL 运行时的关键机制与项目实践

很多 ABAP 开发者在第一次接触 CDS View Code Mapping 时,容易把它理解成一次普通的字段映射操作:左边是 CDS 字段,右边是 OData 属性,拖一拖、连一连,事情就结束了。真正进入项目以后,大家才会发现,这个动作背后牵动的是 SAP Gateway、SADL、DPC 运行时、关联导航,以及…...

YOLOv8训练参数全解析:从epochs到optimizer的保姆级配置指南

YOLOv8训练参数深度优化指南&#xff1a;从基础配置到高阶调参实战 1. 核心训练参数解析与实战配置 YOLOv8作为目标检测领域的新标杆&#xff0c;其参数体系既保留了经典配置又引入了创新机制。我们先从最基础的训练周期控制开始&#xff1a; epochs与time的智能搭配&#xff1…...

【ERPNext部署】:企业用户的开源ERP系统快速搭建方案

【ERPNext部署】&#xff1a;企业用户的开源ERP系统快速搭建方案 【免费下载链接】erpnext_quick_install Unattended install script for ERPNext Versions, 13, 14 and 15 项目地址: https://gitcode.com/gh_mirrors/er/erpnext_quick_install 在数字化转型浪潮中&…...

QMCDecode:免费解锁QQ音乐加密文件的终极解决方案

QMCDecode&#xff1a;免费解锁QQ音乐加密文件的终极解决方案 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac&#xff0c;qmc0,qmc3转mp3, mflac,mflac0等转flac)&#xff0c;仅支持macOS&#xff0c;可自动识别到QQ音乐下载目录&#xff0c;默认转换结…...

清华大学学位论文LaTeX模板:thuthesis完整使用指南

清华大学学位论文LaTeX模板&#xff1a;thuthesis完整使用指南 【免费下载链接】thuthesis LaTeX Thesis Template for Tsinghua University 项目地址: https://gitcode.com/gh_mirrors/th/thuthesis 清华大学thuthesis LaTeX模板是专为清华学子设计的学位论文写作工具&…...

Linux文件操作命令与文件权限

1.创建一个新文件2.查看显示文件3.more命令类似 cat&#xff0c;不过会以一页一页的形式显示4.head命令显示文件的头部内容5.tail命令可用于查看文件的内容的后10行6.文件的压缩与解压7.tar命令用来建立8.zip命令用于压缩文件9.unzip命令用于解压缩zip文件10.文件属性...

消费级GPU福音:OpenClaw+百川2-13B量化版显存占用实测

消费级GPU福音&#xff1a;OpenClaw百川2-13B量化版显存占用实测 1. 为什么关注显存占用&#xff1f; 去年折腾大模型本地部署时&#xff0c;最头疼的就是显存问题。我的RTX3060显卡只有12GB显存&#xff0c;跑Llama2-13B原版模型时&#xff0c;加载阶段就直接爆显存。直到发…...

玩大型游戏用什么主板好:2026年市场格局与技术趋势解析

2026年第一季度&#xff0c;全球游戏级电脑主板市场正经历一场深刻的价值重塑。据行业研究机构数据显示&#xff0c;2026年全球游戏级主板市场规模预计将达到127.5亿美元&#xff0c;年复合增长率保持在8.30%的稳健水平。在这一轮增长周期中&#xff0c;单纯依靠硬件堆砌的时代…...