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

相关推荐
十一.3662 分钟前
012-014 对state的理解,初始化state,react中的事件绑定
前端·react.js·前端框架
你脸上有BUG2 分钟前
SSE库选型+fetch-event-source示例
前端·sse·通知订阅
Never_every993 分钟前
8 个高清 4K 视频素材网址!无水印可商用
大数据·前端·音视频·视频
NotFound4867 分钟前
分享实战中Python Web 框架对比:Django vs Flask vs FastAPI
前端·python·django
冰暮流星7 分钟前
javascript之表单事件1
开发语言·前端·javascript
Dalydai12 分钟前
AI 辅助前端开发:两个月踩坑实录
前端·ai编程
前端那点事13 分钟前
Vue跨页面通信(8种主流方式|完整可运行Demo,Vue2/Vue3通用)
前端·vue.js
a_Ichuan14 分钟前
在HBuilderX创建的uniapp项目中使用unocss
前端·uni-app
里欧跑得慢15 分钟前
12. CSS滤镜效果详解:为页面注入艺术灵魂
前端·css·flutter·web
里欧跑得慢16 分钟前
CSS 级联层:控制样式优先级的新方式
前端·css·flutter·web