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

server/2025/1/11 18:44:39/

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


错误代码:

<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"就可以了


http://www.ppmy.cn/server/157541.html

相关文章

【Rust自学】11.7. 按测试的名称运行测试

喜欢的话别忘了点赞、收藏加关注哦&#xff08;加关注即可阅读全文&#xff09;&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 11.7.1. 按名称运行测试的子集 如果想要选择运行的测试&#xff0c;就将测试的名称&#x…

使用Python爬虫获取淘宝商品详情接口

以下是一篇关于使用Python获取淘宝商品详情接口的长篇文章&#xff1a; 淘宝商品详情接口简介 淘宝商品详情接口是淘宝开放平台提供的API之一&#xff0c;用于获取淘宝商品的详细信息。它可以帮助开发者获取商品的标题、价格、图片、库存、销量、评价等数据。这些数据对于电商…

理解Unity脚本编译过程:程序集

https://docs.unity3d.com/Manual/script-compilation.html 关于Unity C#脚本编译的细节&#xff0c;其中一个比较重要的知识点就是如何自定义Assembly。 预定义的assembly 默认情况下&#xff0c;Unity会按照这个规则进行编译。 PhaseAssembly nameScript files1Assembly-…

数组分割函数

这是一个数组分割函数&#xff0c;它的作用是将一个大数组按照指定的长度分割成多个小数组。 参数说明&#xff1a; array: 需要被分割的原始数组 subGroupLength: 每个小数组的长度 工作原理&#xff1a; splitArray(array, subGroupLength) {let index 0; …

二次雷达的详细介绍及代码示例

一、二次雷达的工作原理 二次雷达&#xff0c;又称空管雷达信标系统&#xff08;Air Traffic Control Radar Beacon System&#xff0c;ATCRBS&#xff09;&#xff0c;是一种无线电电子测位和辨认系统。它由地面询问雷达和飞机上的应答雷达&#xff08;又称雷达信标&#xff0…

Helm部署activemq

1.helm create activemq 创建helm文件目录 2.修改values.yaml 修改image和port 3. helm template activemq 渲染并输出 4. helm install activemq activemq/ -n chemical-park // 安装 5.启动成功

CSS语言的数据库交互

CSS语言的数据库交互&#xff1a;一种新潮流的探索 引言 在现代网页开发中&#xff0c;CSS&#xff08;层叠样式表&#xff09;无疑是构建优美和响应式网页的重要工具。然而&#xff0c;关于CSS和数据库之间的直接交互&#xff0c;尽管并不是一种常见的做法&#xff0c;却引发…

Cognitive architecture 又是个什么东东?

自Langchain&#xff1a; https://blog.langchain.dev/what-is-a-cognitive-architecture/ https://en.wikipedia.org/wiki/Cognitive_architecture 定义 A cognitive architecture refers to both a theory about the structure of the human mind and to a computational…