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

相关推荐
Irene1991几秒前
Vue 3中:setup 函数接收两个重要参数:props 和 context(附:setup 中无法访问 this 详解)
vue.js·setup
念你那丝微笑6 分钟前
uView Plus + Vue3 + TypeScript + UniApp 正确引入 UnoCSS(避坑版)
vue.js·typescript·uni-app
Van_captain9 分钟前
React Native for OpenHarmony Toast 轻提示组件:自动消失的操作反馈
javascript·开源·harmonyos
内存不泄露9 分钟前
基于Spring Boot和Vue的宠物医院管理系统设计与实现
vue.js·spring boot·信息可视化
Van_captain18 分钟前
React Native for OpenHarmony Modal 模态框组件:阻断式交互的设计与实现
javascript·开源·harmonyos
xkxnq18 分钟前
第一阶段:Vue 基础入门(第 14天)
前端·javascript·vue.js
前端小臻18 分钟前
列举react中类组件和函数组件常用到的方法
前端·javascript·react.js
筱歌儿24 分钟前
TinyMCE-----word表格本地图片转base64并上传
前端·word
研☆香24 分钟前
html css js文件开发规范
javascript·css·html
0思必得025 分钟前
[Web自动化] Selenium简单使用
前端·python·selenium·自动化·web自动化