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

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

错误代码:

html 复制代码
<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个位置,才可以让客户状态向下排

正确代码:

html 复制代码
<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"就可以了

相关推荐
初晨未凉19 小时前
elementui自定义内容图片预览
前端
无糖可可果20 小时前
从零读懂一个 Next.js 全栈笔记应用
前端
Maxkim20 小时前
DeepSeek Harness 源码深度分析:像 VS Code 一样插件化的 Agent 框架
前端·架构
xiaominlaopodaren20 小时前
three.js地图数学基础(八):浮点精度
javascript·gis·three.js
喜欢睡觉21 小时前
从零看懂一个 Next.js 笔记应用
前端
SendTomo21 小时前
跨设备文件互传新方案
javascript·网络·webrtc·html5·p2p
cindershade21 小时前
从零实现画布「双击创建节点」:一个 VueFlow 项目的交互全记录
前端
YHL21 小时前
🚀 SSE 服务器发送事件与 BFF 层实战
前端·后端
今日无bug21 小时前
HTML5 Canvas:从画图到游戏开发
前端·canvas
cindershade21 小时前
用 Web Workers 优化前端重计算任务:避免主线程卡顿的实战方案
前端