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

el-descriptions-item使用span占行不生效

需要实现的效果是客户状态单独占满一行


错误代码:

<el-descriptions title="基本信息" :column="3">
<el-descriptions-item label="公司电话:">Suzhou</el-descriptions-item><el-descriptions-item label="批次号:">Suzhou</el-descriptions-item><el-descriptions-item label="借款笔数:">Suzhou</el-descriptions-item><el-descriptions-item label="放款时间:">Suzhou</el-descriptions-item><el-descriptions-item label="放款金额:">Suzhou</el-descriptions-item><el-descriptions-item :span="3" label="客户状态:"><el-tag size="small">School</el-tag></el-descriptions-item>
</el-descriptions>

使用span是没有错的,但是用错了位置,出来的效果就是这样


如图可见客户状态已经是在当前行最后一个的位置,那么直接给他设置span是不会生效的,所以要从前面一个元素下手,让放款金额这个元素提前占满2个位置,才可以让客户状态向下排

正确代码:

<el-descriptions title="基本信息" :column="3">
<el-descriptions-item label="公司电话:">Suzhou</el-descriptions-item><el-descriptions-item label="批次号:">Suzhou</el-descriptions-item><el-descriptions-item label="借款笔数:">Suzhou</el-descriptions-item><el-descriptions-item label="放款时间:">Suzhou</el-descriptions-item><el-descriptions-item :span="2" label="放款金额:">Suzhou</el-descriptions-item><el-descriptions-item :span="3" label="客户状态:"><el-tag size="small">School</el-tag></el-descriptions-item>
</el-descriptions>

只需要在上一个元素上面加上:span="2"就可以了

相关文章:

el-descriptions-item使用span占行不生效

需要实现的效果是客户状态单独占满一行 错误代码&#xff1a; <el-descriptions title"基本信息" :column"3"> <el-descriptions-item label"公司电话:">Suzhou</el-descriptions-item><el-descriptions-item label"…...

Android 绘制学习总结

1、刷新率介绍 我们先来理一下基本的概念&#xff1a; 1、60 fps 的意思是说&#xff0c;画面每秒更新 60 次 2、这 60 次更新&#xff0c;是要均匀更新的&#xff0c;不是说一会快&#xff0c;一会慢&#xff0c;那样视觉上也会觉得不流畅 3、每秒 60 次&#xff0c;也就是 1…...

Linux下部署SSM项目

作者主页&#xff1a;舒克日记 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 Linux部署SSM项目 打包项目 1、修改pom.xml文件&#xff0c;打包方式改为war <packaging>war</packaging>2、idea 通过maven的clean&#xff0c;…...

计算机网络 笔记 数据链路层 2

1,信道划分&#xff1a; (1)时分复用TDM 将时间等分为“TDM帧”&#xff0c;每个TDM帧内部等分为m个时隙&#xff0c;m个用户对应m个时隙 缺点&#xff1a;每个节点只分到了总带宽的1/m,如果有部分的1节点不发出数据&#xff0c;那么就会在这个时间信道被闲置&#xff0c;利用…...

xml简介

目录 基本语法特点及应用场景一个简单示例 xml&#xff08;全称eXtensible Markup Language&#xff09;是一种用于存储和传输数据的标记语言&#xff0c;跨平台并且跨语言&#xff0c;xml内容较多&#xff0c;这篇文章会介绍一些基础的内容。 基本语法 xml文档通常以xml声明开…...

透明部署、旁路逻辑串联的区别

背景 需讨论防火墙到底是串联&#xff0c;还是旁挂。 通常串联指的就是“透明部署”&#xff0c;旁挂指的就是“逻辑串联”。 透明部署&#xff08;串联&#xff09; 也称为透明模式或桥接模式&#xff0c;是一种安全设备的部署方式。在这种模式下&#xff0c;安全设备被串联…...

【网络安全渗透测试零基础入门】之XSS攻击获取用户cookie和用户密码(实战演示)

前言 大家好&#xff0c;我是demon 这是demon给粉丝盆友们整理的网络安全渗透测试入门阶段XSS攻击教程。 本阶段主要讲解XSS攻击获取用户cookie和用户密码。 喜欢的朋友们&#xff0c;记得给晓晓点赞支持和收藏一下&#xff0c;关注我&#xff0c;学习黑客技术。 简介 该…...

c#版本、.net版本、visual studio版本之间的对应关系

最近这几年一直没用过c#开发&#xff0c;都是从事Qt c开发工作&#xff0c;回想一下之前c#还要追溯到2019年&#xff0c;算算时间大概都已过去4&#xff0c;5年了&#xff0c;时间飞快。 2019真是个神奇的数字&#xff0c;vs2019是我用的时间最长的一个IDE&#xff0c;新冠起始…...

熵与交叉熵:从不确定性角度理解 KL 散度

从不确定性减少视角理解KL散度 【 Transformer 系列&#xff0c;故事从 d k \sqrt{d_k} dk​ ​说起】 LLM这么火&#xff0c;Transformer厥功甚伟&#xff0c;某天心血来潮~&#xff0c;再去看看&#xff01; 它长这个样子&#xff1a; 深入浅出 Transformer 看完后&#xff…...

Redis:数据类型

1. 字符串&#xff08;String&#xff09; 简介 概念&#xff1a;这是最简单的数据类型&#xff0c;可以存储字符串、整数或浮点数。特点&#xff1a;支持原子操作&#xff0c;如递增和递减数值。 示例 # 设置一个键值对 SET mykey "Hello, Redis!"# 获取该键的值…...

搭建Node.js后端

从头开始搭建一个Node.js后端&#xff0c;并实现查询历史数据的功能&#xff0c;下面是详细的步骤说明&#xff0c;包括环境配置、项目初始化、代码编写、以及服务器启动。 1. 环境配置 1.1 安装 Node.js 和 npm 首先&#xff0c;你需要在你的电脑上安装 Node.js 和 npm&…...

集合——数据结构

数据结构 就是计算机存储数据的方式。 不同情况下采取不同数据结构会让数据查找&#xff0c;存储更加有效率。 栈...

从CentOS到龙蜥:企业级Linux迁移实践记录(系统安装)

引言&#xff1a; 随着CentOS项目宣布停止维护CentOS 8并转向CentOS Stream&#xff0c;许多企业和组织面临着寻找可靠替代方案的挑战。在这个背景下&#xff0c;龙蜥操作系统&#xff08;OpenAnolis&#xff09;作为一个稳定、高性能且完全兼容的企业级Linux发行版&#xff0…...

《机器学习》——支持向量机(SVM)

文章目录 什么是支持向量机&#xff1f;基本原理数学模型 支持向量机模型模型参数属性信息 支持向量机实例&#xff08;1&#xff09;实例步骤读取数据可视化原始数据使用支持向量机训练可视化支持向量机结果完整代码 支持向量机实例&#xff08;2&#xff09;实例步骤导入数据…...

【PPTist】公式编辑、插入音视频、添加动画

一、插入公式 点击公式的时候 latexEditorVisible 会变成 true src/views/Editor/CanvasTool/index.vue <Modalv-model:visible"latexEditorVisible" :width"880" ><LaTeXEditor close"latexEditorVisible false"update"data &…...

LeetCode - #186 翻转字符串里的单词 II(会员题)

网罗开发 &#xff08;小红书、快手、视频号同名&#xff09; 大家好&#xff0c;我是 展菲&#xff0c;目前在上市企业从事人工智能项目研发管理工作&#xff0c;平时热衷于分享各种编程领域的软硬技能知识以及前沿技术&#xff0c;包括iOS、前端、Harmony OS、Java、Python等…...

Kafka核心参数与使用02

一、从基础的客户端说起 Kafka 提供了非常简单的生产者&#xff08;Producer&#xff09;和消费者&#xff08;Consumer&#xff09;API。通过引入相应依赖后&#xff0c;可以快速上手编写生产者和消费者的示例。 1. 消息发送者主流程 一个最基础的 Producer 发送消息的步骤…...

Three.js 渲染技术:打造逼真3D体验的幕后功臣

文章目录 前言一、着色器&#xff08;Shaders&#xff09;二、后处理&#xff08;Post-processing&#xff09;三、抗锯齿&#xff08;Anti-aliasing&#xff09;四、实时渲染与离线渲染五、光照模型与材质优化六、环境映射&#xff08;Environment Mapping&#xff09;七、纹理…...

QTcpSocket 如何统计在线时长

基本原理 QTcpSocket是 Qt 库中用于 TCP 通信的类。要统计在线时长,关键思路是记录连接建立的时间和当前时间,通过计算两者的差值来得到在线时长。实现步骤 记录连接建立时间: 在连接成功的信号槽函数中记录开始时间。例如,当QTcpSocket成功连接到服务器时,会发出connecte…...

【Altium】AD使用智能粘贴功能把多个网络标签改成端口

1、 文档目标 使用智能粘贴功能把多个网络标签&#xff08;net lable&#xff09;改成端口&#xff08;port&#xff09; 2、 问题场景 客户有一份原理图&#xff0c;网络用的是net label&#xff0c;没用Port&#xff0c;然后创建一个sheet symbol&#xff0c;但是sheet sy…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

怎么让Comfyui导出的图像不包含工作流信息,

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

Java求职者面试指南:Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...

第一篇:Liunx环境下搭建PaddlePaddle 3.0基础环境(Liunx Centos8.5安装Python3.10+pip3.10)

第一篇&#xff1a;Liunx环境下搭建PaddlePaddle 3.0基础环境&#xff08;Liunx Centos8.5安装Python3.10pip3.10&#xff09; 一&#xff1a;前言二&#xff1a;安装编译依赖二&#xff1a;安装Python3.10三&#xff1a;安装PIP3.10四&#xff1a;安装Paddlepaddle基础框架4.1…...

海云安高敏捷信创白盒SCAP入选《中国网络安全细分领域产品名录》

近日&#xff0c;嘶吼安全产业研究院发布《中国网络安全细分领域产品名录》&#xff0c;海云安高敏捷信创白盒&#xff08;SCAP&#xff09;成功入选软件供应链安全领域产品名录。 在数字化转型加速的今天&#xff0c;网络安全已成为企业生存与发展的核心基石&#xff0c;为了解…...

Java后端检查空条件查询

通过抛出运行异常&#xff1a;throw new RuntimeException("请输入查询条件&#xff01;");BranchWarehouseServiceImpl.java // 查询试剂交易&#xff08;入库/出库&#xff09;记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...