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

使用el-row和el-col混合table设计栅格化，实现表头自适应宽度，表格高度占位

news 来源：原创 2025/7/18 4:51:57

演示效果：

如上图,由于地址信息很长,需要占多个格子,所以需要错开,若想实现这种混合效果,可以这样搭建:

页面效果：

代码分析:

上面使用el-row和el-col搭建表单显示第一排三个8,第二排8和16

下面混合table实现，并使用border来自适应宽度，height="280"来控制表格高度，即使表格数据只有一条也可以占位，提升表格效果

<template><el-dialog title="xxx资料" :visible.sync="open" :close-on-click-modal="false" @close="cancel" width="840px"append-to-body><el-form ref="form" :model="dataForm" label-width="90px"><el-row><el-col :span="8"><el-form-item label="名称">{{ dataForm.xxx}}</el-form-item></el-col><el-col :span="8"><el-form-item label="电话">{{ dataForm.xxx}}</el-form-item></el-col><el-col :span="8"><el-form-item label="性别">{{ dataForm.sex }}</el-form-item></el-col></el-row><el-row><el-col :span="8"><el-form-item label="年龄">{{ dataForm.age }}</el-form-item></el-col><el-col :span="16"><el-form-item label="xxx">{{ dataForm.xxx}}</el-form-item></el-col></el-row></el-form><el-table :data="xxxArr" border height="280"><el-table-column prop="xxx" label="xxx" align="center"/><el-table-column prop="xxx" label="xxx" align="center"/><el-table-column prop="xxx" label="xxx" align="center"/><el-table-column prop="xxx" label="xxx" align="center"/><el-table-column prop="xxx" label="xxx" align="center"/></el-table><div slot="footer" class="dialog-footer"><el-button @click="cancel">取 消</el-button></div></el-dialog>
</template>

使用el-row和el-col混合table设计栅格化，实现表头自适应宽度，表格高度占位

演示效果： 如上图,由于地址信息很长,需要占多个格子,所以需要错开,若想实现这种混合效果,可以这样搭建: 页面效果： 代码分析: 上面使用el-row和el-col搭建表单显示第一排三个8,第二排8和16 下面混合table实现，并使用border来自适应宽度…...

编程日记 2025/7/18 4:51:57

MQ的基本概念

1 MQ的基本概念 RabbitMQ是一个开源的消息代理和队列服务器，它使用Erlang语言编写并运行在多种操作系统上，如Linux、Windows等。RabbitMQ可以接收、存储和转发消息（也称为“事件”）到连接的客户端。它适用于多种场景，…...

编程日记 2025/7/18 4:50:02

基于协同过滤的图书推荐系统爬虫分析可视化【源码+文档】

【1】系统介绍研究背景随着互联网的普及和电子商务的发展，用户可以在线获取大量的图书资源。然而，面对海量的信息，用户往往难以找到自己真正感兴趣的书籍。同时，对于在线书店或图书馆等提供图书服务的平台来说，如何…...

编程日记 2025/7/14 20:16:14

Kruskal 算法在特定边权重条件下的性能分析及其实现

引言 Kruskal 算法是一种用于求解最小生成树（Minimum Spanning Tree, MST）的经典算法。它通过逐步添加权重最小的边来构建最小生成树，同时确保不会形成环路。在本文中，我们将探讨在特定边权重条件下 Kruskal 算法的性能，并分别给出伪代码和 C 语言实现。特别是，我们将分…...

编程日记 2025/7/18 4:51:19

Pandas2.2 General Data manipulations 方法描述melt(frame[, id_vars, value_vars, var_name, …])将多个列的值转换为行形式pivot(data, *, columns[, index, values])将长格式的数据转化为宽格式pivot_table(data[, values, index, columns, …])用于创建数据透视表&#…...

编程日记 2025/7/16 11:08:36

【信息系统项目管理师】第8章：项目整合管理过程详解

文章目录一、制定项目章程1、输入2、工具和技术3、输出二、制订项目管理计划1、输入2、工具和技术3、输出三、指导与管理项目工作1、输入2、工具和技术3、输出四、管理项目知识1、输入2、工具和技术3、输出五、监控项目工作1、输入2、工具和技术3、输出六、实施整体变更控…...

编程日记 2025/7/18 4:51:20

从变更到通知：使用Python和MongoDB Change Streams实现即时事件监听

MongoDB提供了一种强大的功能，称为Change Streams，它允许应用程序监听数据库中的变更事件，并在数据发生变化时立即做出响应。这在mysql数据库是不具备没有这个功能的。又如：我们在支付环节想一直监听支付回调的状态，就…...

编程日记 2025/7/18 4:45:26

vue3+elementPlus封装的数据过滤区

目录结构源码 index.vue <template><el-form class"mb-5" :rules"rules" :model"queryForm" ref"queryDOM" label-width"80"><el-row :gutter"20"><slot></slot><el-col cla…...

编程日记 2025/7/18 4:43:12

PHP RabbitMQ连接超时问题

问题背景 Error: The connection timed out after 3 sec while awaiting incoming data 看到这个报错，我不以为意，认为是我设置的超时时间不够导致的，那就设置长一点 Error: The connection timed out after 300 sec while awaiting incom…...

编程日记 2025/7/18 4:50:02

SpringMvc完整知识点二（完结）

SpringMVC获取请求参数环境准备工作等均省略，可详见快速入门，此处只写非共有部分代码该部分示例项目SpringMvcThree已上传至Gitee，可自行下载客户端请求参数的格式为：namevalue&passwordvalue... ... 服务端想要获取请求…...

编程日记 2025/7/17 1:24:29

WebSocket 通信说明与基于 ESP-IDF 的 WebSocket 使用

一、 WebSocket 出现的背景最开始客户端（Client） 和服务器（Server） 通信使用的是 HTTP 协议，HTTP 协议有一个的缺陷为：通信只能由客户端（Client）发起。在一些场景下&#xff0…...

编程日记 2025/7/14 22:31:55

UE5 Compile Plugins | Rebuild from Source Manually | Unreal Engine | Tutorial

Step 1 Open Engine Folder H:\UE5\UE_5.3\Engine\Build\BatchFiles Step 2 Hold "Shift""Mouse Right Click"in Empty Area Step 3 Select "Open PowerShell window here .\RunUAT.bat BuildPlugin -plugin"H:\projects\MetaHuman光照2\plu…...

编程日记 2025/7/16 17:54:44

深度解析 Ansible：核心组件、配置、Playbook 全流程与 YAML 奥秘(下)

文章目录六、playbook运行playbook方式Playbook VS ShellScripts忽略错误 ignore_errorshandlers和notify结合使用触发条件playbook中tags的使用playbook中变量的使用invertory参数模板templates迭代与条件判断迭代：with_items迭代嵌套子变量roles 六、playbook 运…...

编程日记 2025/7/18 4:49:09

langchain chroma 与 chromadb笔记

chromadb可独立使用也可搭配langchain 框架使用。环境： python 3.9 langchain0.2.16 chromadb0.5.3 chromadb 使用示例 import chromadb from chromadb.config import Settings from chromadb.utils import embedding_functions# 加载embedding模型 en_embeddin…...

编程日记 2025/7/14 1:38:55

04 创建一个属于爬虫的主虚拟环境

文章目录回顾conda常用指令创建一个爬虫虚拟主环境Win R 调出终端查看当前conda的虚拟环境创建 spider_base 的虚拟环境安装完成查看环境是否存在为 pycharm 配置创建的爬虫主虚拟环境选一个盘符来存储之后学习所写的爬虫文件用 pycharm 打开创建的文件夹pycharm 配置解释器…...

编程日记 2025/7/13 22:22:25

xcode开发相关英语单词

创建项目： otheraudio unit extension app音频单元扩展应用程序generic kernel extension通用内核扩展installer plug-in安装程序插件instruments package仪器包iokit driveriokit驱动程序presence pane状态窗格screen saver屏幕保护程序...

编程日记 2025/7/12 17:00:29

etcd-v3.5release-(2)-STM

a.b.c表示a文件里的b类的方法c，注意a不一定是包名，因为文件名不一定等于包名 ！！！！etcd在put的过程中使用的batchTxBuffered，这个事务是写bbolt数据库使用的事务，是对bbolt.Tx的一个…...

编程日记 2025/7/18 4:41:48

多系统萎缩锻炼如何好起来？

多系统萎缩（Multiple System Atrophy, MSA）是一种复杂的神经系统退行性疾病，影响着患者的自主神经系统、运动系统和平衡功能等多个方面。面对这一挑战，科学、合理的锻炼对于缓解症状、提高生活质量至关重要。本文将详细介绍多系统…...

编程日记 2025/7/16 9:19:49

非对称任意进制转换器（安卓）

除了正常进制转换，还可以输入、输出使用不同的数字符号，达成对数值进行加密的效果点我下载APK安装包提取码：h4nw 使用unity开发。新建一个c#代码文件，把代码覆盖进去，再把代码文件添加给main camera即可。 using Sy…...

编程日记 2025/7/13 23:10:59

MySQL数据库安全与管理

1、创建两个新用户U_student1和U_student2,密码分别为1234和5678 create user U_student1@localhost identified by 1234, U_student2@localhost identified by 5678; 2、创建两个新用户的详细信息保存在MySQL数据库的user表中 use mysql; select user, host, authentication…...

编程日记 2025/7/18 4:49:08

python使用PyPDF2 和 pdfplumber操作PDF文件

文章目录一、第三方库介绍二、基本使用1、拆分pdf2、合并pdf3、提取文字内容4、提取表格内容5、PDF加密6、PDF解密一、第三方库介绍 Python 操作 PDF 会用到两个库，分别是：PyPDF2 和 pdfplumber。 PyPDF2 可以更好的读取、写入、分割、合并PDF文件&a…...

编程日记 2025/6/28 18:48:53

【vue2自定义指令】v-disabled 实现el-switch，el-button等elementUI禁用（disabled）效果

如果你搜过类似的功能，肯定看到过千篇一律的 // 实现按钮禁用el.disabled true// 增加 elementUI 的禁用样式类el.classList.add(is-disabled)但是这个方案明显对el-switch，不起作用，所以我这边直接把方案贴出来，不想了解具体原理…...

编程日记 2025/7/12 15:58:28

从容面对大规模作业:利用PMI提升作业启用和结束效率

1.进程管理瓶颈随着集群规模的不断扩大和处理器性能的不断提升，高性能计算HPC(High Performance Computing)系统性能已经进入百亿亿次时代，进程管理是高性能计算的一个重要组成部分，传统进程管理已经不能满足海量处理器的管理需求&#xff…...

编程日记 2025/7/17 12:05:14

2024年认证杯SPSSPRO杯数学建模C题(第一阶段)云中的海盐解题全过程文档及程序

2024年认证杯SPSSPRO杯数学建模 C题云中的海盐原题再现： 巴黎气候协定提出的目标是：在2100年前，把全球平均气温相对于工业革命以前的气温升幅控制在不超过2摄氏度的水平，并为1.5摄氏度而努力。但事实上，许多之前的…...

编程日记 2025/7/13 23:03:10

burp(6)暴力破解与验证码识别绕过

声明！ 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关&a…...

编程日记 2025/7/18 4:45:25

不同系统查看软件占用端口的方式

Windows 使用命令提示符（CMD） 打开命令提示符: 按 Win R 键打开“运行”对话框，输入 cmd 并按回车。为了执行某些命令，您可能需要以管理员身份运行命令提示符。可以通过右键点击“开始”按钮并选择“命令提示符（管理…...

编程日记 2025/7/18 4:37:59

【已解决】黑马点评项目中-实战篇11-状态登录刷新章节设置RefreshTokenInterceptor拦截器后登录异常的问题

黑马点评项目中-实战篇11-状态登录刷新章节设置RefreshTokenInterceptor拦截器后登录异常的问题在 MvcConfig 文件中添加好RefreshTokenInterceptor拦截器出现异常情况按照验证码登录后，进入主页面，再点击“我的”，又跳入登录界面原因…...

编程日记 2025/7/18 4:49:09

Artec Leo 3D扫描仪革新家具行业的数字化展示【沪敖3D】

随着科技的飞速进步，三维扫描技术已被广泛应用于包括家居行业在内的多个行业。面对现代消费者对家居产品日益增长的个性化和多样化需求，传统的家居设计和展示方法已难以满足市场需求。三维扫描技术的出现，为家居行业带来了新的发展机遇&#…...

编程日记 2025/7/18 4:40:07

UG NX二次开发(Python)-UIStyler-选取点

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录 1、前言2、设计一个UI界面3、创建长方体的代码4、需要引入的库5、测试验证1、前言采用Python语言进行UG NX二次开发的资料比较少，我本来不是很认可采用Python进行二次开发的，但是近期有读者咨询…...

编程日记 2025/7/17 15:09:09

Linux网络编程之---组播和广播

一.组播 1.概述单播地址标识单个IP 接口，广播地址标识某个子网的所有IP 接口， 多播地址标识一组IP 接口。单播和广播是寻址方案的两个极端(要么单个要么全部)， 多播则意在两者之间提供一种折中方案。多播数据报只应该由对它感兴趣的接口接收…...

编程日记 2025/7/16 18:25:53

[计算机网络] HTTP/HTTPS

一. HTTP/HTTPS简介 1.1 HTTP HTTP（超文本传输协议，Hypertext Transfer Protocol）是一种用于从网络传输超文本到本地浏览器的传输协议。它定义了客户端与服务器之间请求和响应的格式。HTTP 工作在 TCP/IP 模型之上，通常使用端口 …...

编程日记 2025/7/14 9:01:48

运动模糊效果

1、运动模糊效果运动模糊效果，是一种用于模拟真实世界中快速移动物体产生的模糊现象的图像处理技术，当一个物体以较高速度移动时，由于人眼或摄像机的曝光时间过长，该物体会在图像中留下模糊的运动轨迹。这种效果游戏、动画、电…...

编程日记 2025/7/18 4:51:21

扫二维码进小程序的指定页面

草料二维码解码器微信开发者工具获取二维码解码的参数->是否登陆->跳转 options.q onLoad: function (options) {// console.log("options",options.q)if (options && options.q) {// 解码二维码携带的链接信息let qrUrl decodeURIComponent(optio…...

编程日记 2025/7/14 15:41:00

uniapp的生命周期

在 UniApp 中，生命周期函数是指在组件（如页面、视图等）创建和销毁过程中会自动触发的一些函数。UniApp 提供了多种生命周期函数，帮助开发者在适当的时机进行相关的逻辑处理。 UniApp 的生命周期函数可以分为页面生命周期和组件…...

编程日记 2025/7/14 4:24:03

vue3-生命周期钩子函数

在 Vue 3 中，**生命周期函数**是指在组件的不同阶段自动执行的一些特殊函数。这些函数就像组件的“生老病死”的各个阶段，你可以在不同阶段执行不同的操作。生命周期的主要阶段： 1. **创建阶段**（组件还没有出现在页面上&#x…...

编程日记 2025/7/17 10:30:43

科技云报到：数智化转型风高浪急，天翼云如何助力产业踏浪而行？

科技云报到原创。捷径消亡，破旧立新，是今年千行百业的共同底色。穿越产业周期，用数字化的力量重塑企业经营与增长的逻辑，再次成为数字化技术应用的主旋律，也是下一阶段产业投资的重点。随着数字化转型行至“深水区…...

编程日记 2025/7/9 1:15:39

利用 360 安全卫士极速版关闭电脑开机自启动软件教程

在使用电脑的过程中，过多的开机自启动软件会严重拖慢电脑的开机速度，影响我们的使用体验。本教程中简鹿办公将详细介绍如何使用 360 安全卫士极速版关闭电脑开机自启动软件，让您的电脑开机更加迅速流畅。一、打开 360 安全卫士极速版在电…...

编程日记 2025/7/14 11:19:35

调用大模型api 批量处理图像保存到excel

最近需要调用大模型，并将结果保存到excel中，效果如下： 代码： import base64 from zhipuai import ZhipuAI import os import pandas as pd from openpyxl import Workbook from openpyxl.drawing.image import Image from io i…...

编程日记 2025/7/12 15:38:37

【Spring 全家桶】Spring MVC 快速入门，开始web 更好上手（上篇），万字解析，建议收藏！！！

本篇会加入个人的所谓鱼式疯言 ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. 🤭🤭🤭可能说的不是那么严谨.但小编初心是能让更多人…...

编程日记 2025/7/16 16:04:41

Redisson看门狗机制

redis分布式锁我们需要手动为锁设置超时过期时间，但是这个时间不好判断，如果太短，持有锁的客户端还在执行业务，锁就超时释放了；如果太长了，持有锁的客户端释放锁失败，则其他客户端一直没法获取锁…...

编程日记 2025/7/12 21:43:24

LeetCode279. 完全平方数（2024冬季每日一题 27）

给你一个整数 n ，返回和为 n 的完全平方数的最少数量。完全平方数是一个整数，其值等于另一个整数的平方；换句话说，其值等于一个整数自乘的积。例如，1、4、9 和 16 都是完全平方数，而 3 和 11 不是。 …...

编程日记 2025/7/16 13:18:38

HTML礼物圣诞树

系列文章序号目录1HTML满屏跳动的爱心（可写字）2HTML五彩缤纷的爱心3HTML满屏漂浮爱心4HTML情人节快乐5HTML蓝色爱心射线6HTML跳动的爱心（简易版）7HTML粒子爱心8HTML蓝色动态爱心9HTML跳动的爱心（双心版）1…...

编程日记 2025/7/14 7:53:11

【JVM】JVM基础教程（二）

上一篇：【JVM】JVM基础教程（一）-CSDN博客类加载器什么是类加载器（ClassLoader） 是Java虚拟机提供给应用程序去实现获取类和接口字节码数据的技术。从这个定义可以得出结论：Java是允许开发者写点代码…...

编程日记 2025/7/17 13:35:10

Appium 安装问题汇总

好生气好生气，装了几天了， opencv4nodejs 和 mjpeg-consumer 就是装不了，气死我了不管了，等后面会装的时候再来完善，气死了气死了。目录前言 1、apkanalyzer.bat 2、opencv4nodejs 3、ffmpeg 4、mjpeg-consume…...

编程日记 2025/7/15 4:27:05

在网安中什么是白帽子

在网络安全领域，白帽子是指那些专门从事网络安全研究，帮助企业或个人发现并修复安全漏洞的专家。以下是对白帽子的详细解释： 一、定义与角色白帽子是网络安全领域的术语，通常指那些具备专业技能和知识的网络安全专家。他们的工作…...

编程日记 2025/7/14 1:32:58

C++解析URL的方式

一、URL格式为http://192.168.80.166:6666/designResLib/test/test std::vector<CString> ThkCabRMaterialStaDlg::splitAddress(const CString& address) {std::vector<CString> result;CString remaining address;result.push_back(remaining.Left(remaini…...

编程日记 2025/7/14 14:39:18

【软件安全】软件安全设计规范，软件系统安全设计制度（Word原件）

1.1安全建设原则 1.2 安全管理体系 1.3 安全管理规范 1.4 数据安全保障措施 1.4.1 数据库安全保障 1.4.2 操作系统安全保障 1.4.3 病毒防治 1.5安全保障措施 1.5.1实名认证保障 1.5.2 接口安全保障 1.5.3 加密传输保障 1.5.4终端安全保障软件全面文档清单涵盖以下核心内容&a…...

编程日记 2025/7/12 1:47:55

基于ZooKeeper搭建Hadoop高可用集群

ZooKeeper搭建Hadoop高可用集群在之前安装的Hadoop3.3.6集群中HDFS NameNode 和 YARN ResourceManager 都是单节点，集群不具有高可用性。 HDFS 高可用架构 HDFS 高可用架构主要组件： Active NameNode 和 Standby NameNode： 两台 NameNode…...

编程日记 2025/7/18 1:15:32

华硕主板不能开启

正常流程： [主機板]BIOS如何設置主機板整合圖形(內顯)和獨立顯示卡同時顯示輸出 | 官方支援 | ASUS 台灣如果开启了CSR兼容性模式，在BIOS里面，就必须关掉，才能支持多显示器，如下图显示的标识才会出现。...

编程日记 2025/6/28 19:17:57

[C++]构造函数和析构函数

一、构造函数 1.构造函数的基本概念 1.对构造函数的理解： 构造函数是类的一种特殊成员函数，其主要功能是在创建对象时进行初始化操作。它的名字与类名相同，并且没有返回值类型（不能是void）。例如，对于一个…...

编程日记 2025/7/15 12:22:56

相关文章：