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

项目场景：

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

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

---

问题描述

问题：使用时设置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>
1
2
3
4
5
6
7
8
9
10
11
12

---

原因分析：

官网以及一些文章做尝试 均是为<el-descriptions-item>设置span="3"	【为el-descriptions的column参数值】 意思是占据几个格子 但尝试没有变化 故自己开始尝试
1

---

解决方案：

以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>
1
2
3
4
5
6
7
8
9
10
11
12