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

相关推荐
q***49868 小时前
MySQL数据的增删改查(一)
android·javascript·mysql
我有一个object8 小时前
uniapp上传文件报错:targetSdkVersion设置>=29后在Android10+系统设备不支持当前路径。请更改为应用运行路径!
前端·javascript·vue.js·uniapp
北极糊的狐8 小时前
关于jQuery 事件绑定,记录常用事件类型及核心注意事项
前端·javascript·jquery
星空的资源小屋8 小时前
极速精准!XSearch本地文件搜索神器
javascript·人工智能·django·电脑
_Kayo_8 小时前
vue3 computed 练习笔记
前端·vue.js·笔记
CodeSheep8 小时前
VS 2026 正式发布,王炸!
前端·后端·程序员
无奈何杨8 小时前
CoolGuard事件查询增加策略和规则筛选,条件结果展示
前端·后端
梦里不知身是客118 小时前
正则表达式常见的介绍
前端·javascript·正则表达式
初学小白...8 小时前
HTML知识点
前端·javascript·html
鹏多多8 小时前
flutter睡眠与冥想数据可视化神器:sleep_stage_chart插件全解析
android·前端·flutter