el-table固定表头(设置height)出现内容过多时不能滚动问题
主要原因是el-table没有div包裹

解决:加一个div并设置其高度和overflow
我自己的主要代码
<div class="contentTable"><el-tableref="table":data="tableData"stripe@row-dblclick="onRowDblclick"height="100%"><el-table-columntype="index"align="center"label="序号"width="50"></el-table-column><el-table-columnprop="templateName"align="center"label="模板名称"width="150"></el-table-column><el-table-columnprop="mainContent"align="center"label="主要内容"></el-table-column><el-table-columnprop="devContent"align="center"label="活动措施和设备状态"></el-table-column><el-table-column prop="operate" align="center" label="操作" width="80"><template slot-scope="scope"><el-buttonsize="mini"class="delete-btn"@click="onDelete(scope.row)"title="删除"v-isLogin></el-button></template></el-table-column></el-table></div>
css代码:
.contentTable {height: calc(100% - 50px) !important;overflow: scroll;
}
.contentTable >>> .el-table__body-wrapper::-webkit-scrollbar {width: 10px;height: 8px;
}
-webkit-scrollbar用来加滚动条的!!!
页面所有代码:
<template><el-dialog:title="title":visible.sync="visible"class="template-query"@opened="openInit"append-to-bodywidth="80%"><el-form:model="form"ref="form":inline="true"style="text-align: right"size="small"><el-form-item label="模板名称:" prop="templateName"><el-inputv-model="form.templateName"maxlength="20"v-special-code></el-input></el-form-item><el-form-item><el-button type="primary" @click="onQuery">查询</el-button><el-button type="primary" @click="onReset">重置</el-button></el-form-item></el-form><div class="contentTable"><el-tableref="table":data="tableData"stripe@row-dblclick="onRowDblclick"height="100%"><el-table-columntype="index"align="center"label="序号"width="50"></el-table-column><el-table-columnprop="templateName"align="center"label="模板名称"width="150"></el-table-column><el-table-columnprop="mainContent"align="center"label="主要内容"></el-table-column><el-table-columnprop="devContent"align="center"label="活动措施和设备状态"></el-table-column><el-table-column prop="operate" align="center" label="操作" width="80"><template slot-scope="scope"><el-buttonsize="mini"class="delete-btn"@click="onDelete(scope.row)"title="删除"v-isLogin></el-button></template></el-table-column></el-table></div></el-dialog>
</template>
<script>
import { listTemplatesByType } from "@/api/template.js";
import { removeTemplate } from "@/api/template.js";
import { getBizcodeList } from "@/api/common.js";
export default {props: {templateQueryVisible: {type: Boolean,default: false,},type: {type: String,default: "",},typeName: {type: String,default: "",},},data() {return {title: "",form: {templateName: "",},headField: [], //表头信息tableData: [], //表格数据};},computed: {visible: {get() {return this.templateQueryVisible;},set(val) {this.$emit("update:templateQueryVisible", val);},},},mounted() {},methods: {//打开窗口初始化openInit() {this.title = this.typeName + "模板管理";this.form.templateName = "";//根据type查询表头信息// listGridHeadByType({ type: this.type }).then(async (res) => {// var headFieldList = JSON.parse(res.data.data);// for (var i = 0; i < headFieldList.length; i++) {// if ("codeType" in headFieldList[i]) {// await getBizcodeList(headFieldList[i].codeType).then((res) => {// headFieldList[i]["codeList"] = res.data.data;// });// }// }// this.headField = headFieldList;// });//查询模板数据this.onQuery();},//删除onDelete(row) {var that = this;this.$confirm("确定删除该模板?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {removeTemplate(row.id).then((res) => {if (res.data.code == "1") {that.$message({type: "success",message: "删除模板成功!",});that.onQuery();} else {that.$message({type: "error",message: "保存模板失败!",});}});});},//双击行加载模板数据onRowDblclick(row) {if (row.id) {delete row.id;}if (row.ID) {delete row.ID;}this.$emit("loadTemplateData", row);},//查询onQuery() {//根据type查询模板数据listTemplatesByType({type: this.type,name: this.form.templateName,}).then((res) => {var resData = res.data.data;var tableData = [];console.log(resData);if (resData) {for (var i = 0; i < resData.length; i++) {var content = JSON.parse(resData[i].content);let res = {id: resData[i].id,templateName: resData[i].name,mainContent: content.mainContent,devContent: content.devContent,};tableData.push(res);}this.tableData = tableData;} else {this.tableData = [];}});},//重置onReset() {if (this.$refs.form) {this.$refs.form.resetFields();this.onQuery();}},//渲染表格列itemFormatter(cellValue, codeList) {if (codeList && cellValue) {// return this.$common.renderCodeId(cellValue, codeList);return this.$common.renderCode(cellValue, "ID", "TEXT", codeList);} else {return cellValue;}},},
};
</script>
<style scoped>
.template-query >>> .el-dialog__body {height: 600px;
}.template-query >>> .el-form-item__label {width: 85px !important;
}.delete-btn {background-image: url("~@/assets/imgs/delete.png");width: 23px;height: 23px;padding-left: 5px;cursor: pointer;background-repeat: no-repeat;
}
.contentTable {height: calc(100% - 50px) !important;overflow: scroll;
}
.contentTable >>> .el-table__body-wrapper::-webkit-scrollbar {width: 10px;height: 8px;
}
</style>
相关文章:
el-table固定表头(设置height)出现内容过多时不能滚动问题
主要原因是el-table没有div包裹 解决:加一个div并设置其高度和overflow 我自己的主要代码 <div class"contentTable"><el-tableref"table":data"tableData"striperow-dblclick"onRowDblclick"height"100%&q…...
从流程优化到经营提效,法大大电子签全面助力智慧零售升级
在新零售模式下,“商业综合体、百货商场、连锁商超、连锁便利店、线上电商平台”等各类商业零售企业借助数字化的手段来改造和重塑传统零售流程和逻辑,实现全面数字化转型,包括线上线下一体化、全场景覆盖、全链条联通、全渠道经营、客户服务…...
Jquery 通过class名称属性,匹配元素
UI自动化过程中,常常需要判断某个元素是否满足条件,再走不通的脚本逻辑;、本文介绍如何通过jquery判断菜单是否展开,来决定是否执行菜单展开脚本;Jquery通过class名称属性,匹配元素 我们先分析,…...
复杂数据统计与R语言程序设计实验二
1、创建一个对象,并进行数据类型的转换、判别等操作,步骤如下。 ①使用命令清空工作空间,创建一个对象x,内含元素为序列:1,3,5,6,8。 ②判断对象x是否为数值型数据。 ③…...
python3:print()打印. 2023-11-18
Python3 print ()不换行输出 import random # 导入random for i in range(10):print(random.randint(1,999), end",") #random.randint(1,999)随机返回1-999间任意一个整数,包括1和999 #print()添加end"" 自定义参数,实现不换行输出效果.end的…...
ARM 版 Kylin V10 部署 KubeSphere 3.4.0 不完全指南
前言 知识点 定级:入门级KubeKey 安装部署 ARM 版 KubeSphere 和 KubernetesARM 版麒麟 V10 安装部署 KubeSphere 和 Kubernetes 常见问题 实战服务器配置 (个人云上测试服务器) 主机名IPCPU内存系统盘数据盘用途ksp-master-1172.16.33.1681650200KubeSphere/k8…...
二元分类模型评估方法
文章目录 前言一、混淆矩阵二、准确率三、精确率&召回率四、F1分数五、ROC 曲线六、AUC(曲线下面积)七、P-R曲线类别不平衡问题中如何选择PR与ROC 八、 Python 实现代码混淆矩阵、命中率、覆盖率、F1值ROC曲线、AUC面积 指标 公式 意义 真正例 (TP)被…...
专业数据标注公司:景联文科技领航数据标注行业,满足大模型时代新需求
随着大模型的蓬勃发展和相关政策的逐步推进,为数据要素市场化配置的加速推进提供了有力的技术保障和政策支持。数据要素生产力度的不断提升,为数据标注产业带来了迅速发展的契机。 根据国家工信安全发展研究中心测算,2022年中国数据加工环节的…...
.Net8 Blazor 尝鲜
全栈 Web UI 随着 .NET 8 的发布,Blazor 已成为全堆栈 Web UI 框架,可用于开发在组件或页面级别呈现内容的应用,其中包含: 用于生成静态 HTML 的静态服务器呈现。使用 Blazor Server 托管模型的交互式服务器呈现。使用 Blazor W…...
Vue.js 页面加载时触发函数
使用 Vue 的生命周期钩子函数: 在 Vue 组件中,可以使用生命周期钩子函数来执行特定的代码。其中,mounted 钩子函数可以在组件被挂载到 DOM 后触发。 <template><div><!-- 页面内容 --></div> </template>expo…...
Go 语言常用数据结构
1. 请解释 Go 语言中的 map 数据结构,以及它与数组和切片的区别。 ①、解释说明: 在Go语言中,map是一种内置的数据类型,它是一种无序的键值对集合。每个键值对都由一个键和一个值组成,它们之间用冒号分隔。键可以是任…...
【数据结构】图的简介(图的逻辑结构)
一.引例(哥尼斯堡七桥问题) 哥尼斯堡七桥问题是指在哥尼斯堡市(今属俄罗斯)的普雷格尔河(Pregel River)中,是否可以走遍每座桥一次且仅一次,最后回到起点的问题。这个问题被认为是图…...
2342.数位和相等数对的最大和
题目来源: leetcode题目,网址:2342. 数位和相等数对的最大和 - 力扣(LeetCode) 解题思路: 哈希表,根据数位和分组后,计算每组中最大两个数之和,然后返回最大值即可。…...
关于Spring Bean的一些总结
一、Spring Bean的生命周期 Spring中的Bean生命周期是指一个Bean从被创建、初始化,到被使用,再到被销毁的整个过程。在Spring容器管理的Bean中,生命周期的管理主要通过回调方法和事件监听来实现。以下是Spring Bean的生命周期的主要阶段和回…...
6.2 List和Set接口
1. List接口 List接口继承自Collection接口,List接口实例中允许存储重复的元素,所有的元素以线性方式进行存储。在程序中可以通过索引访问List接口实例中存储的元素。另外,List接口实例中存储的元素是有序的,即元素的存入顺序和取…...
2023数维杯国际赛数学建模D题完整论文分享!
大家好,终于完成了2023年第九届数维杯国际大学生数学建模挑战赛D题The Mathematics of Laundry Cleaning(洗衣清洁的数学原理)的完整论文啦。 D论文共43页,一些修改说明10页,正文25页,附录8页。 D题第一问…...
golang中context使用总结
一、context使用注意事项 在使用context时,有一些需要注意的事项,以及一些与性能优化相关的建议: 避免滥用context传递数据:context的主要目的是传递请求范围的数据和取消信号,而不是用于传递全局状态或大量数据。滥用…...
医院数字化LIS(检验信息系统)源码
临床检验信息管理系统(LIS)是利用计算机连接医疗设备,通过计算机信息处理技术,将医院检验科或实验室的临床检验数据进行自动收集、存储、处理、提取、传输和交换,满足所有授权用户的功能需求。 一、系统概述 1.LIS&am…...
挑战单芯片NOA,这款“All in one”方案或将改变主流市场走向
随着降本增效、电子架构升级(尤其是跨域计算、多域融合等概念)以及供应链减复(降低电子物料的SKU)的需求愈加明确,对于车载计算赛道,也带来新的变化。 比如,去年9月,英伟达率先发布下…...
CODING DevOps产品认证笔记
1.敏捷&精益&瀑布概述 1.1 敏捷软件开发 第一章敏捷软件开发背景 背景:乌卡时代 易变性:当今世界的变化越来越多越来越快,越来越不可预测。不确定性:历史上的任何一个时代所带来的经验已经无法为当今世界的所有变化提供参照。复杂性:事物间的…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包:import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序(自然排序和定制排序)Arrays.binarySearch()通过二分搜索法进行查找(前提:数组是…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡(如 HAProxy、AWS NLB、阿里 SLB)发起上游连接时,将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后,ngx_stream_realip_module 从中提取原始信息…...
docker 部署发现spring.profiles.active 问题
报错: org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...
重启Eureka集群中的节点,对已经注册的服务有什么影响
先看答案,如果正确地操作,重启Eureka集群中的节点,对已经注册的服务影响非常小,甚至可以做到无感知。 但如果操作不当,可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
第7篇:中间件全链路监控与 SQL 性能分析实践
7.1 章节导读 在构建数据库中间件的过程中,可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中,必须做到: 🔍 追踪每一条 SQL 的生命周期(从入口到数据库执行)&#…...
django blank 与 null的区别
1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是,要注意以下几点: Django的表单验证与null无关:null参数控制的是数据库层面字段是否可以为NULL,而blank参数控制的是Django表单验证时字…...
Python竞赛环境搭建全攻略
Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型(算法、数据分析、机器学习等)不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...
基于鸿蒙(HarmonyOS5)的打车小程序
1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...
解析“道作为序位生成器”的核心原理
解析“道作为序位生成器”的核心原理 以下完整展开道函数的零点调控机制,重点解析"道作为序位生成器"的核心原理与实现框架: 一、道函数的零点调控机制 1. 道作为序位生成器 道在认知坐标系$(x_{\text{物}}, y_{\text{意}}, z_{\text{文}}…...
Redis上篇--知识点总结
Redis上篇–解析 本文大部分知识整理自网上,在正文结束后都会附上参考地址。如果想要深入或者详细学习可以通过文末链接跳转学习。 1. 基本介绍 Redis 是一个开源的、高性能的 内存键值数据库,Redis 的键值对中的 key 就是字符串对象,而 val…...
