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

相关推荐
知行力1 分钟前
【GitHub每日速递 20251209】Next.js融合AI,让draw.io图表创建、修改、可视化全靠自然语言!
javascript·人工智能·github
REDcker4 分钟前
JS 与 C++ 语言绑定技术详解
开发语言·javascript·c++
zlpzlpzyd12 分钟前
vue.js 3中全局组件和局部组件的区别
前端·javascript·vue.js
浩星21 分钟前
css实现类似element官网的磨砂屏幕效果
前端·javascript·css
一只小风华~25 分钟前
Vue.js 核心知识点全面解析
前端·javascript·vue.js
2022.11.7始学前端29 分钟前
n8n第七节 只提醒重要的待办
前端·javascript·ui·n8n
SakuraOnTheWay32 分钟前
React Grab实践 | 记一次与Cursor的有趣对话
前端·cursor
阿星AI工作室35 分钟前
gemini3手势互动圣诞树保姆级教程来了!附提示词
前端·人工智能
徐小夕38 分钟前
知识库创业复盘:从闭源到开源,这3个教训价值百万
前端·javascript·github
xhxxx1 小时前
函数执行完就销毁?那闭包里的变量凭什么活下来!—— 深入 JS 内存模型
前端·javascript·ecmascript 6