[element-ui] el-descriptions站位,换行用法

使用element-ui组件el-descriptions

element-ui组件el-descriptions官方文档

需要将el-descriptions-item换行用法:使用span

(1)span 代表占位,当span 的值大于 column的值,就会自动换一行
(2)span:元素占据的列数,默认为1。默认每个item占据一个格子
在这里插入图片描述

举例说明

(1)使用组件不换位时,如下

<el-descriptions class="margin-top" :column="2" :size="size" border> 
        <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
        <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
        <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
        <el-descriptions-item label="个人介绍">个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍</el-descriptions-item>
      </el-descriptions>

在这里插入图片描述

(2)现在将居住地一行显示,需要在居住地那加上span=“2”

<el-descriptions class="margin-top" :column="2" :size="size" border> 
        <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
        <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
        <el-descriptions-item label="居住地"  span="2">苏州市</el-descriptions-item>
        <el-descriptions-item label="个人介绍">个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍个人介绍</el-descriptions-item>
      </el-descriptions>

在这里插入图片描述

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: el-descriptions-item换行是指在使用Element UIDescriptions组件时,当某个属性的值过长时,需要自动换行显示。可以通过设置el-descriptions-item的属性:label-width和content-width来控制换行的效果。其中,label-width表示属性名称的宽度,content-width表示属性值的宽度。当属性值的宽度超过了content-width时,就会自动换行显示。 ### 回答2: 在HTML中,如果想让el-descriptions-item元素换行,可以使用CSS样式来实现。我们可以将el-descriptions-item元素设置为display:block,这样它就会成为一个块级元素,自动占据一行,并在其前后添加垂直间距。 具体代码如下: ``` .el-descriptions-item { display: block; margin-bottom: 10px; } ``` 这样,每个el-descriptions-item元素就会单独占据一行,并且之间有10像素的垂直间距。如果需要更多的间距,可以适当调整margin-bottom的值。 另外,如果在el-descriptions中加了border属性,在这种情况下,每个el-descriptions-item之间默认会有间距,如果需要调整item之间的间距,可以使用.el-descriptions-item:not(:last-child) {} 的css选择器,去选择所有非最后一个el-descriptions-item,然后设置margin-bottom值,代码示例如下: ``` .el-descriptions { border: 1px solid #ccc; border-radius: 4px; padding: 10px; } .el-descriptions-item:not(:last-child) { margin-bottom: 20px; } ``` 这种方法可以使el-descriptions-item元素之间的距离更加美观,更符合设计要求。 ### 回答3: el-descriptions-itemelement-ui中一个用于展示一条记录的组件,它可以用于展示表格、列表等页面中的数据。在el-descriptions-item中,我们可以设置label和content两个属性,通过这两个属性来展示数据。其中label用于展示数据的字段名,而content则用于展示数据的具体内容。 在使用el-descriptions-item的过程中,可能会遇到需要在一个label下面展示多条数据的情况。这个时候,我们就需要使用换行来展示多条数据。 换行的方式有多种,其中一种比较简单的方式就是在content中使用html标签br。使用br标签可以帮助我们在el-descriptions-item换行展示多条数据。 例如,我们需要在一个label下面展示两个数据student1和student2,那么可以这样使用el-descriptions-item: ``` <el-descriptions-item label="学生名字"> <span>student1</span><br/> <span>student2</span> </el-descriptions-item> ``` 这样,就可以将两个学生名字分别展示在两行中。我们也可以使用其他方式,比如设置display为block等方式来实现换行。 总之,在使用el-descriptions-item展示多条数据时,需要考虑数据的展示方式和排版,以达到更好的展示效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值