Bootstrap

element el-descriptions-item设置单独一行显示【记录】

项目场景:

提示:这里简述项目相关背景:

项目场景:显示数据,使备注参数单独一行显示


问题描述

问题:使用时设置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>
;