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

相关推荐
代码小库16 小时前
【2026前端最新面试题——day10】JavaScript 高频面试题
开发语言·前端·javascript
零陵上将军_xdr17 小时前
后端转全栈学习-Day4-JavaScript 基础-2
开发语言·javascript·学习
zzz_236817 小时前
【Spring】面试突击系列(三):Spring Web MVC 深度解析
前端·spring·面试
colofullove17 小时前
小说上传中心与异步处理进度展示设计
前端
Marst Code17 小时前
⚙️ 2026 年推荐技术方案
前端
qq_3660862217 小时前
测试接口传参数时,放在Header和Body中后台接收参数的区别
java·开发语言·前端
whatever who cares17 小时前
Vue3中vue文件和composables的分工
前端·javascript·vue.js
袋鼠云数栈UED团队18 小时前
基于 superpowers 实现复杂前端改造
前端
袋鼠云数栈前端18 小时前
基于 superpowers 实现复杂前端改造
前端·ai
sugar__salt18 小时前
LLM服务HTTP接口实战:前端HTTP请求全解与项目落地
前端·网络协议·http