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

相关推荐
猫头_6 小时前
AI 流式传输工程指南:有了 EventSource 为何还要 Fetch?
javascript·http·llm
hunterandroid7 小时前
Paging 3 RemoteMediator 实战:构建离线优先的分页列表
android·前端
Underwood_177 小时前
星级评价——了解useState
前端
hunterandroid7 小时前
[鸿蒙从零到一] ArkUI 组件化实战:构建可复用、可组合的自定义组件
前端·华为·架构
一只公羊7 小时前
iPhone摄像头 在开发/调试过程中强行停止 App,导致 `AVCaptureSession` 没有被正常释放
前端
活于未来7 小时前
从零搭建期权波动率曲面可视化平台:FastAPI + Vue 3 实战
vue.js
橘子海全栈攻城狮7 小时前
【最新源码】基于SpringBoot + Vue的超市管理系统的设计与实现D002
java·开发语言·vue.js·spring boot·后端·spring
良木林7 小时前
滑动窗口 - LeetCode hot 100
javascript·算法·leetcode·双指针·滑动窗口
浮江雾7 小时前
Flutter第十节-----Flutter布局与组件全解析
android·开发语言·前端·学习·flutter·入门