vue3封装Element表格自适应

表格高度自适应
分页跟随表格之后

1. 满屏时出现滚动条

在这里插入图片描述

2. 不满屏时不显示滚动条

在这里插入图片描述

表格设置maxHeight后不出现滚动条

解决方案

表格外层元素设置max-height
el-table–fit 设置高度100%

.table-box {max-height: calc(100% - 120px);
}
.el-table--fit {height: 100%;
}

示例代码

<template><div class="outer-box"><div class="form-box"><DymanicFormref="formRef":inline="true":schema="schema"v-model="searchValue"><el-form-item><el-button type="primary" @click="handleQuery">查询</el-button><el-button @click="handleReset">重置</el-button></el-form-item></DymanicForm></div><div class="table-box"><Table:tableData="tableData":haveCheckBox="true":haveIndex="true":columns="tableColumn":stripe="true":border="true"max-height="100%"@select-change="handleSelectChange"@row-click="handleRowClick"/></div><div class="page-box"><Pagination:total="total"v-model:currentPage="queryParams.currentPage"v-model:currentSize="queryParams.currentSize"@pagination="handleGetTableData"/></div></div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import type { ItemSchema } from "~/types/dymanic";
import DymanicForm from "~/components/DymanicForm.vue";
import { ElMessage } from "element-plus";const formRef = ref<InstanceType<typeof DymanicForm>>();
const schema = ref<ItemSchema>({userId: {formItem: {label: "用户ID:",},style: {width: "200px",},componentName: "ElInput",placeholder: "请输入用户ID",maxlength: 20,},username: {formItem: {label: "账号:",},style: {width: "200px",},componentName: "ElInput",placeholder: "请输入账号",maxlength: 20,},name: {formItem: { label: "用户名:" },style: {width: "200px",},componentName: "ElInput",placeholder: "请输入用户名",maxlength: 20,},date: {formItem: {label: "日期:",},style: {width: "200px",},componentName: "ElDatePicker",type: "daterange",startPlaceholder: "开始日期",endPlaceholder: "结束日期",},
});
const searchValue = reactive({userId: "",username: "",name: "",
});
const handleQuery = () => {formRef.value.validate((valid: boolean) => {if (valid) {console.log("查询", searchValue);// 查询逻辑}});
};const handleReset = () => {formRef.value.resetFields();
};const tableData = ref([{date: "2016-05-03",name: "Tom",address: "No. 189, Grove St, Los Angeles",userid: "123456789",username: "admin",password: "123456",role: "管理员",status: "正常",createTime: "2023-03-01 12:00:00",updateTime: "2023-03-01 12:00:00",remark: "备注",},{date: "2016-05-02",name: "Tom",address: "No. 189, Grove St, Los Angeles",userid: "123456789",username: "admin",password: "123456",role: "管理员",status: "正常",createTime: "2023-03-01 12:00:00",updateTime: "2023-03-01 12:00:00",remark: "备注",},{date: "2016-05-04",name: "Tom",address: "No. 189, Grove St, Los Angeles",userid: "123456789",username: "admin",password: "123456",role: "管理员",status: "正常",createTime: "2023-03-01 12:00:00",updateTime: "2023-03-01 12:00:00",remark: "备注",},{date: "2016-05-01",name: "Tom",address: "No. 189, Grove St, Los Angeles",userid: "123456789",username: "admin",password: "123456",role: "管理员",status: "正常",createTime: "2023-03-01 12:00:00",updateTime: "2023-03-01 12:00:00",remark: "备注",},
]);const tableColumn = reactive([{prop: "date",label: "日期",width: "180",align: "center",},{prop: "name",label: "姓名",width: "180",align: "center",},{prop: "address",label: "地址",width: "280",align: "left",},{prop: "userid",label: "用户ID",width: "180",align: "center",},{prop: "username",label: "用户名",width: "180",align: "center",},{prop: "password",label: "密码",width: "180",align: "center",},{prop: "role",label: "角色",width: "180",align: "center",},{prop: "status",label: "状态",width: "180",align: "center",},{prop: "createTime",label: "创建时间",width: "180",align: "center",},{prop: "updateTime",label: "更新时间",width: "180",align: "center",},{prop: "remark",label: "备注",width: "180",align: "center",},{prop: "operation",label: "操作",width: "280",align: "center",fixed: "right",operate: [{label: "编辑",icon: "Edit",type: "primary",click: (row: any) => {ElMessage.success("点击了编辑" + row.name);},},{label: "删除",icon: "Delete",type: "danger",click: (row: any) => {ElMessage.error("点击了删除" + row.name);},},],},
]);const handleSelectChange = (selection: any) => {ElMessage.success("选择了" + selection[0].name);console.log(selection);
};const handleRowClick = (row, column, event) => {ElMessage.success("点击了" + row.name);console.log(row);console.log(column);console.log(event);
};const total = ref(100);
const queryParams = ref({currentPage: 2,currentSize: 30,
});
const handleGetTableData = () => {ElMessage.success(`当前页:${queryParams.value.currentPage},每页条数:${queryParams.value.currentSize}`);console.log(queryParams.value);
};
</script>
<style lang="scss" scoped>
.outer-box {display: flex;flex-direction: column;height: 100%;width: 100%;
}
.form-box {height: 60px;display: flex;align-items: center;
}
.table-box {max-height: calc(100% - 120px);
}
.el-table--fit {height: 100%;
}
.page-box {height: 60px;display: flex;justify-content: flex-end;align-items: center;margin-top: 20px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/290352.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

李宏毅【生成式AI导论 2024】第6讲 大型语言模型修炼_第一阶段_ 自我学习累积实力

背景知识:机器怎么学会做文字接龙 详见:https://blog.csdn.net/qq_26557761/article/details/136986922?spm=1001.2014.3001.5501 在语言模型的修炼中,我们需要训练资料来找出数十亿个未知参数,这个过程叫做训练或学习。找到参数后,我们可以使用函数来进行文字接龙,拿…

Acer宏碁暗影骑士擎AN515-58笔记本电脑工厂模式原厂Win11系统ISO镜像安装包下载

宏基AN515-58原装出厂OEM预装Windows11系统工厂包&#xff0c;恢复出厂时开箱状态一模一样&#xff0c;带恢复还原功能 链接&#xff1a;https://pan.baidu.com/s/1iCVSYtList-hPqbyTyaRqQ?pwdt2gw 提取码&#xff1a;t2gw 宏基原装系统自带所有驱动、NITROSENSE风扇键盘灯…

基于TensorFlow的花卉识别(算能杯)%%%

Anaconda Prompt 激活 TensorFlow CPU版本 conda activate tensorflow_cpu //配合PyCharm环境 直接使用TensorFlow1.数据分析 此次设计的主题为花卉识别&#xff0c;数据为TensorFlow的官方数据集flower_photos&#xff0c;包括5种花卉&#xff08;雏菊、蒲公英、玫瑰、向日葵…

Python拆分PDF、Python合并PDF

WPS能拆分合并&#xff0c;但却是要输入编辑密码&#xff0c;我没有。故写了个脚本来做拆分&#xff0c;顺便附上合并的代码。 代码如下&#xff08;extract.py) #!/usr/bin/env python """PDF拆分脚本(需要Python3.10)Usage::$ python extract.py <pdf-fil…

以XX医院为例的医疗建筑能效管理系统【建筑能耗 供电可靠 】

一、行业背景 二、行业特点 1.供电可靠性要求高&#xff1a;医院配电系统复杂&#xff0c;门诊、急救、手术室、ICU/CCU、血液透析等场合特一级和一级负荷比较多&#xff0c;一旦发生故障会造成严重影响&#xff0c;对配电可靠性要求极高。 2.能耗水平高&#xff1a;医院能耗…

2024 蓝桥打卡Day25

CCFCSP算法练习 202305-1 重复局面 202305-2 矩阵运算 202303-1 田地丈量 202303-2 垦田计划

GEE教程——如何将一个指定区域的矢量信息添加到矢量中

问题来源 1 - 将光栅文件转换为矢量文件; 2 - 复制用于切割光栅的矢量/多边形的属性,并将其添加到转换后生成的每个多边形中。 这里的主要问题是我们对一个区域进行筛选和后续运算的时候,需要将其研究区的属性进行复制,传递给后续栅格转化矢量后的数据中。下面就是我们矢…

由浅到深认识Java语言(25):正则表达式

该文章Github地址&#xff1a;https://github.com/AntonyCheng/java-notes 在此介绍一下作者开源的SpringBoot项目初始化模板&#xff08;Github仓库地址&#xff1a;https://github.com/AntonyCheng/spring-boot-init-template & CSDN文章地址&#xff1a;https://blog.c…

LabVIEW智能降噪系统

LabVIEW智能降噪系统 随着噪声污染问题的日益严重&#xff0c;寻找有效的降噪技术变得尤为关键。介绍了一种基于LabVIEW平台开发的智能降噪系统&#xff0c;该系统能够实时采集环境噪声&#xff0c;并通过先进的信号处理技术实现主动降噪&#xff0c;从而有效改善生活和工作环…

PHP开发全新29网课交单平台源码修复全开源版本,支持聚合登陆易支付

这是一套最新版本的PHP开发的网课交单平台源代码&#xff0c;已进行全开源修复&#xff0c;支持聚合登录和易支付功能。 项目 地 址 &#xff1a; runruncode.com/php/19721.html 以下是对该套代码的主要更新和修复&#xff1a; 1. 移除了论文编辑功能。 2. 移除了强国接码…

离线linux服务器安装mysql8

本文的服务器环境&#xff1a;openEuler毛坯版的&#xff0c;很多常用的指令都没有预装&#xff0c;比如rpm、tar等等&#xff0c;没有网络坏境&#xff0c;需要自己手动配置本地yum仓库&#xff0c;安装相关指令 1、检查服务器是否已经安装了MySQL 1.1、查询mysql以安装的相关…

MYSQL8.0安装、配置、启动、登入与卸载详细步骤总结

文章目录 一.下载安装包1.方式一.官网下载方式二.网盘下载 二.解压安装三.配置1.添加环境变量 三.验证安装与配置成功四.初始化MYSQL五.注册MySQL服务六.启动与停止MYSQL服务七.修改账户默认密码八.登入MySQL九.卸载MySQL补充&#xff1a;彻底粉碎删除Mysql 一.下载安装包 1.方…

蓝桥杯-卡片换位

solution 有一个测试点没有空格&#xff0c;要特别处理&#xff0c;否则会有一个测试点运行错误&#xff01; 还有输入数据的规模在变&#xff0c;小心顺手敲错了边界条件 #include<iostream> #include<string> #include<queue> #include<map> #incl…

动态规划入门(数字三角形模型)

备战2024年蓝桥杯&算法学习 -- 每日一题 Python大学A组 试题一&#xff1a;摘花生 试题二&#xff1a;最低通行费用 试题三&#xff1a;方格取数 试题四&#xff1a;传纸条 试题一&#xff1a;摘花生 【题目描述】 Hello Kitty想摘点花生送给她喜…

持续集成流水线介绍(CI)

目录 一、概述 二、持续集成的典型操作流程 2.1 概述 2.2 持续集成的操作流程图 2.3 持续集成关键流程说明 三、构建持续集成流水线的方式 3.1 依托云厂商能力 3.2 采用开源产品 3.3 企业自研 四、构建持续化集成流水线 4.1 基于GitHub的持续集成流水线&#xff08;公…

Java毕业设计-基于springboot开发的招聘信息管理系统平台-毕业论文+答辩PPT(附源代码+演示视频)

文章目录 前言一、毕设成果演示&#xff08;源代码在文末&#xff09;二、毕设摘要展示1、开发说明2、需求分析3、系统功能结构 三、系统实现展示1、系统功能模块2、管理员功能模块3、企业后台管理模块4、用户后台管理模块 四、毕设内容和源代码获取总结 Java毕业设计-基于spri…

Tomcat项目创建 以及 在IDEA当中集成Tomcat

一: 有关Tomcat的WEB项目创建 TOMCAT项目的创建有两种方式, 第一种是利用骨架进行创建, 第二种是利用填补进行相应的创建, 不适用骨架进行创建 ,在这里主要聊第二种 (使用IDEA版本为2023) 1. 创建MAVEN项目, 非骨架形式 2.在相应的pom文件当中设置打包方式 为 war包的打包形…

快速上手Spring Cloud 十四:璀璨物联网之路

快速上手Spring Cloud 一&#xff1a;Spring Cloud 简介 快速上手Spring Cloud 二&#xff1a;核心组件解析 快速上手Spring Cloud 三&#xff1a;API网关深入探索与实战应用 快速上手Spring Cloud 四&#xff1a;微服务治理与安全 快速上手Spring Cloud 五&#xff1a;Spring …

|行业洞察·汽车|《2024新能源汽车行业及营销趋势报告-20页》

报告的主要内容解读&#xff1a; 新能源汽车行业概述及品牌分布&#xff1a; 近年来&#xff0c;中国新能源汽车销量增速高&#xff0c;市场占有率快速提升&#xff0c;成为汽车行业的重要增量。新能源汽车消费者趋向年轻化、女性化和高端化&#xff0c;对高科技、新体验有较高…

获取高德安全码SHA1

高德开发者平台上给的三种方法 获取安全码SHA1&#xff0c;这里我自己使用的是第三种方法。 1、通过Eclipse编译器获取SHA1 使用 adt 22 以上版本&#xff0c;可以在 eclipse 中直接查看。 Windows&#xff1a;依次在 eclipse 中打开 Window -> Preferances -> Androi…