element表格高度撑开div滚动失效解决方案

描述:当显示区域小于表格列表显示内容时 列表完全撑开表格 无法触发el-table组件的滚动事件

解决:包裹表格的div,加上display: flex;flex-direction: column;即可

<template><div class="table-wrap table-scrollable"><el-table :data="tableData" stripe style="width: 100%"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table></div>
</template><script setup>
const tableData = generateData(20);
function generateData(count) {const data = [];for (let i = 0; i < count; i++) {data.push({date: `2016-05-${i + 1}`,name: 'Tom',address: 'No. 189, Grove St, Los Angeles',});}return data;
}
</script><style>
.table-wrap {height: 200px;overflow: hidden;
}
.table-scrollable {display: flex;flex-direction: column;
}
</style>

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

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

相关文章

Bahdanau 注意力中上下文变量 ′的公式解释

公式 (10.4.1) 是 Bahdanau 注意力模型中的一个关键公式&#xff0c;用于计算在解码时间步 ( t’ ) 的上下文变量 (\mathbf{c}_{t’})&#xff1a; [ \mathbf{c}{t’} \sum{t1}^T \alpha(\mathbf{s}_{t’ - 1}, \mathbf{h}_t) \mathbf{h}_t ] 下面对公式进行详细解释&#x…

【pytorch18】Logistic Regression

回忆线性回归 for continuous:y xwbfor probability output:yσ(xwb) σ:sigmoid or logistic 线性回归是简单的线性模型&#xff0c;输入是x&#xff0c;网络参数是w和b&#xff0c;输出是连续的y的值 如何把它转化为分类问题?加了sigmoid函数&#xff0c;输出的值不再是…

开闭原则的简单总结

简介 开闭原则指的是软件实体(类、模块、函数等)应该对扩展开放,对修改关闭。这意味着: 对扩展开放:当需要新增功能时,可以通过添加新的代码来实现,而不是修改现有代码。对修改关闭:已经存在的、经过测试的代码不应该被修改。 优缺点 优点: 提高代码的可维护性和复用性降低…

java-HashSet 源码分析 1

## 深入分析 Java 中的 HashSet 源码 HashSet 是 Java 集合框架中的一个重要类&#xff0c;它基于哈希表实现&#xff0c;用于存储不重复的元素。HashSet 允许 null 元素&#xff0c;并且不保证元素的顺序。本文将详细分析 HashSet 的源码&#xff0c;包括其数据结构、构造方法…

2024阿里国际春招笔试

第一题 0 解题思路&#xff1a; 数据范围很大&#xff0c;肯定得找规律。 当n1时&#xff0c;0&#xff0c;1&#xff0c;结果为0 当n2时&#xff0c;00&#xff0c;01&#xff0c;10&#xff0c;11&#xff0c;结果为1 当n3时&#xff0c;000&#xff0c;001&#xff0c;010&a…

AWS IoT Core 权限管理指南

AWS IoT Core 是一项托管云服务,允许连接设备安全地与云应用程序和其他设备进行交互。有效管理 IoT Core 的权限对于确保设备和数据的安全至关重要。本文将详细介绍 IoT Core 的常用权限分类,并提供相应的 JSON 策略示例。 1. 概述 IoT Core 的权限可以大致分为以下几类: …

【算法笔记自学】第 3 章 入门篇(1)——入门模拟

3.1简单模拟 自己写的题解 #include <stdio.h> #include <stdlib.h> int main() {int N;int num0;scanf("%d",&N);while(N!1){if(N%20){NN/2;}else{N(3*N1)/2;}num;}printf("%d",num);system("pause"); // 防止运行后自动退出&…

Linux网络管理

一、linux网络管理 1.获取计算机的网络信息 基本语法&#xff1a; #ifconfig #ip address &#xff08;ip a&#xff09; 解析&#xff1a; ens33&#xff1a;默认网卡 lo&#xff1a;环回网卡&#xff0c;127.0.0.1作为固定ip代表本机 virbr0&#xff1a;虚拟网络接口&…

三维轮廓仪测粗糙度:光学3D表面轮廓仪功能详解

在精密制造领域&#xff0c;表面粗糙度的测量是确保产品质量的关键步骤。光学3D表面轮廓仪为这一需求提供了解决方案。 在半导体制造、3C电子、光学加工等高精度行业&#xff0c;表面粗糙度的测量精度直接影响到产品的性能和可靠性。光学3D表面轮廓仪正是为了满足这一需求而设计…

MIPI D-PHY、C-PHY VCX虚拟通道详解

在MIPI CSI-2协议中,VCX(Virtual Channel Extension)是一个重要的字段,用于扩展虚拟通道标识符(Virtual Channel Identifier, VC)的大小,以便在数据流中区分更多的逻辑数据通道。 虚拟通道说明: 1. VCX的作用 扩展VC字段:VC字段在数据标识符(Data Identifier, DI)…

以腾讯为例,手把手教你搭建产品帮助中心

一个精心设计的产品帮助中心对于提高用户满意度和体验至关重要。腾讯&#xff0c;作为全球领先的互联网企业&#xff0c;通过其多样化的产品线&#xff08;包括微信、QQ、腾讯游戏、腾讯视频等&#xff09;吸引了亿万用户。下面将以腾讯为例&#xff0c;向您展示如何搭建一个高…

《python程序语言设计》2018版第5章第51题利用turtle画18x18的格子

05.51.01version 先从第一一个格子来做 turtle.right(45) turtle.circle(18, steps4) turtle.hideturtle() turtle.done()这个代码很简单的现实出格子的样式。 现在的问题是循环的话。首先角度45度怎么处理 随着45度一次一次迭代。他是应该转4590呢还是4545呢&#xff1f;&…

《QT从基础到进阶·四十三》QPlugin插件多线程问题和只有插件dll没有头文件和lib文件时调用插件中的方法

1、插件和多线程问题&#xff1a; 创建插件对象不能放到多线程执行&#xff0c;不然报错&#xff1a;ASSERT failure in QWidget: "Widgets must be created in the GUlthread. //不能放在多线程执行 QPluginLoader pluginLoader(pluginsDir.absoluteFilePath(fileName))…

pandas中 groupby分组详解 1

引言 在一个使用 pandas 做数据分析的项目过程中&#xff0c;再次深刻理解了一下 pandas 中使用 groupby 进行分组的一些细节问题&#xff0c;以及对想要做的操作如何实现&#xff0c;在此记录&#xff1b; 问题 1&#xff1a;groupby 分组查看分组结果&#xff0c;以及重设分…

【C++】Google Test(gtest)单元测试

文章目录 Google Test&#xff08;gtest&#xff09;单元测试使用示例更多用法测试夹具 Google Test&#xff08;gtest&#xff09;单元测试 单元测试是一种软件测试方法&#xff0c;它旨在将应用程序的各个部分&#xff08;通常是方法或函数&#xff09;分离出来并独立测试&a…

Firewall防火墙

Linux包过滤防火墙 netfilter 称为Linux防火墙的“内核态”位于Linux内核 中的包过滤功能体系iptables “用户态”位于/sbin/iptables&#xff0c;包过滤的工作层次 主要是网络层&#xff0c;针对IP数据包体现在对包内的IP地址、端口等信息的处理上 iptables的表、链结构 规…

NodeJs的安装与环境变量配置

Node.js的环境变量配置主要涉及设置Node.js的安装路径、npm&#xff08;Node Package Manager&#xff09;的全局模块安装路径和缓存路径&#xff0c;以及可能需要的国内镜像源配置。以下是详细的配置步骤&#xff1a; 一、安装Node.js 下载Node.js安装包&#xff1a; 访问Nod…

Android(2) : 创建手机模拟器

1.进入device manager, 选择添加 2.配置选择 名称: Pixel8 Pro 大小: 6.7英寸 分辨率: 1344x2992px Density: xxhdpi 3.下载镜像 4.编辑虚拟机内存 文件如下 C:\Users\admin\AppData\Roaming\Google\AndroidStudio2024.1\studio64.exe.vmoptions 我的电脑是32G内存, …

直播预告|飞思实验室暑期公益培训7月10日正式开启,报名从速!

01 培训背景 很荣幸地向大家宣布&#xff1a;卓翼飞思实验室将于7月10日正式开启为期两个月的暑期公益培训&#xff01;本次培训为线上直播&#xff0c;由中南大学计算机学院特聘副教授&#xff0c;RflySim平台总研发负责人戴训华副教授主讲。 培训将基于“RflySim—智能无人…

编程上下文Context及其实现原理

编程上下文Context及其实现原理 author:shengfq date:2024-07-06 title:编程上下文Context及其实现原理 category:编程思想1.编程中的上下文Context是指什么? 在编程和软件工程领域&#xff0c;“上下文”&#xff08;Context&#xff09;是一个多义词&#xff0c;其含义可以…