项目场景:
提示:这里简述项目相关背景:
项目场景:显示数据,使备注参数单独一行显示
问题描述
问题:使用时设置span无法使某数据单独占一行
vue代码:
<el-descriptions
title=""
:column="3"
border
>
<el-descriptions-item label="一">{{ xx }}</el-descriptions-item>
<el-descriptions-item label="二">{{ xx }}</el-descriptions-item>
<el-descriptions-item label="三">{{ xx}}</el-descriptions-item>
<el-descriptions-item label="四">{{ xx}}</el-descriptions-item>
<el-descriptions-item label="五">{{ xx}}</el-descriptions-item>
<el-descriptions-item label="备注" :span="3">{{ bz }}</el-descriptions-item>
</el-descriptions>
原因分析:
官网以及一些文章做尝试 均是为<el-descriptions-item>设置span="3" 【为el-descriptions的column参数值】 意思是占据几个格子 但尝试没有变化 故自己开始尝试
解决方案:
以column=“3”为例子,即一行三个数据组,当其中一个数据需要占满一行时,就需要同时给其他组数据也要相应改变,即给其他两个数据组增加span属性。
通俗讲:a,b,c三兄弟在一个家里,c想单独出去,必须给家人说,也就是a,b需要知道,并且收拾c空出的地方。
最后更改后如下:
<el-descriptions
title=""
:column="3"
border
>
<el-descriptions-item label="一">{{ xx }}</el-descriptions-item>
<el-descriptions-item label="二">{{ xx }}</el-descriptions-item>
<el-descriptions-item label="三">{{ xx }}</el-descriptions-item>
<el-descriptions-item label="a" :span="1">{{ xx }}</el-descriptions-item>
<el-descriptions-item label="b" :span="2">{{ xx }}</el-descriptions-item>
<el-descriptions-item label="备注" :span="3">{{ bz }}</el-descriptions-item>
</el-descriptions>