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

news2024/9/23 21:29:20

使用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>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/732335.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

通过正则表达式删除包含某个字符串的一整行

正则表达式为&#xff1a;^.*YourString.*\R 以下为NotePad编辑器的操作步骤&#xff1a; 1、CtrlH打开文本编辑器的替换功能 2、将上面的正则表达式复制到"查找目标"文本框 3、"替换为"文本框置为空 4、勾选“正则表达式” 5、点击替换或者全部替换

数据结构-ArrayList

目录 线性表 顺序表 ArrayList ArrayList的使用 ArrayList的构造方法 ArrayList的常用方法 ArrayList的遍历 实现简单的ArrayList 洗牌算法 删除公共字符串问题 杨辉三角 线性表 线性表是n个具有相同特性的数据元素的有限序列.线性表是一种在实际中广泛使用的数据结…

【标准】国家标准GB7713-87(科学论文编写格式)

目 录 1 引言 2 定义 2.1 科学技术报告 2.2 学位论文 2.3 学术论文 3 编写要求 4 编写格式 5 前置部分 5.1 封面 5.2 封二 5.3 题名页 5.4 变异本 5.5 题名 5.6 序或前言 5.7 摘要 5.8 关键词 5.9 目次页 6 主体部分 6.1 格式 6.2 序号 6.3 引言(或绪论)…

如何在没有软件的情况下将 PDF 转换为 PPT(100% 免费)

演示文稿由文字、图片、音频、动画等元素组成&#xff0c;通常用于会议、课堂或演讲中&#xff0c;展示演讲者想要表达的主要内容。如果您遇到重要文档以 PDF 格式存储&#xff0c;但现在需要转换为 PPT 格式的情况&#xff0c;请不要担心。我们本指南的目标是帮助用户将 PDF 转…

BeanFactory和ApplicationContext的入门、关系和继承

BeanFactory快速入门 ApplicationContext快速入门 BeanFactory与ApplicationContext的关系 1)BeanFactory是Spring的早期接口&#xff0c;称为Spring的Bean工厂。ApplicationContext是后期更高级接口&#xff0c;称之为Spring 容器; 2)ApplicationContext在BeanFactory基础上…

路径规划算法:基于瞬态优化的路径规划算法- 附代码

路径规划算法&#xff1a;基于瞬态优化的路径规划算法- 附代码 文章目录 路径规划算法&#xff1a;基于瞬态优化的路径规划算法- 附代码1.算法原理1.1 环境设定1.2 约束条件1.3 适应度函数 2.算法结果3.MATLAB代码4.参考文献 摘要&#xff1a;本文主要介绍利用智能优化算法瞬态…

充电桩系统的阿里云服务器的配置如何?

两台ecs. 微信公众号 微信小程序 微信商户 Redis mysql netty mqtt 更多信息私信我

【Leetcode】203. 移除链表元素

给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 # Definition for singly-linked list. # class ListNode(object): # def __init__(self, val0, nextNone): # self.val va…

Apollo、RocketMQ加载顺序问题

在SpringCloudAlibaba框架中&#xff0c;因Nacos配置中心管理权限过于简单&#xff0c;决定用Apollo代替Nacos配置中心&#xff0c;但在启动时&#xff0c;Nacos、Redis等配置读取正常&#xff0c;RocketMQ由于启动过早&#xff0c;无法从Apollo读取自己的服务地址配置。 报错…

基于github制作个人学术网站(主页)

模板 首先找到一个学术模板&#xff0c;fork到远程仓库。academicpages&#xff0c;如果不是很清楚具体的步骤&#xff0c;可以参考保姆级教程。在github上对该网站代码修改不是很方便&#xff0c;肯定是在本地进行更新后push到远程仓库。 本地Git 学会下载和安装就行&#…

读取摄像机的内参和畸变系数并对畸变图像进行去畸变

这个程序的目标是读取摄像机的参数(内参和畸变系数),并对畸变图像进行去畸变操作,然后进行一些特征点和矩形框的绘制。 #include 语句引入所需的库。using namespace std; 和 using namespace cv; 语句是在代码中使用std和opencv命名空间,这样就不用在每次使用这些库的函数…

Bluetooth 开发科普

Bluetooth 开发科普 1、蓝牙协议结构 Controller运行在蓝牙芯片上&#xff0c;host运行在主控上&#xff0c;两芯片通过硬件通信接口&#xff08;uart或usb&#xff09;&#xff0c;进行通信连接&#xff08;HCI&#xff09;。 实际使用中有不同场景&#xff0c;根据场景需求&…

第三章 SSD存储介质:闪存 3.2-3.3

3.2 闪存实战指南 闪存接口有同步异步之分。一般来说&#xff0c;异步传输速率慢&#xff0c;同步传输速率快。 &#xff08;1&#xff09;异步接口没有时钟&#xff0c;每个数据读由一次RE_n信号触发&#xff0c;每个数据写由一次WE_n信号触发。 &#xff08;2&#xff09;同步…

又曝新作!阿里P9再出山,操作性超强的Spring源码实践

如果你看懂了 Spring 源码&#xff0c;再去看 MyBatis、Spring Security 源码&#xff0c;你会发现这些源码都非常容易&#xff0c;稍微瞅几眼就懂了。 然而源码的学习是一个枯燥的过程&#xff0c;源码解读也是一个枯燥的过程&#xff0c;但是一旦你把源码搞懂了&#xff0c;…

远程接口调用工具Feign

JAVA 项目中如何实现接口调用&#xff1f; Httpclient HttpClient 是 Apache Jakarta Common 下的子项目&#xff0c;用来提供高效的、最新的、功能丰富的支持 Http 协议的客户端编程工具包&#xff0c;并且它支持 HTTP 协议最新版本和建议。HttpClient 相比传统 JDK 自带的 U…

C++、QT(GUI)知识库系统

目录 一、项目介绍 二、项目展示 三、源码分享 一、项目介绍 知识库系统 为一些常用知识进行统一储存、管理、更新、检索等功能的系统&#xff0c;整体类似于博客之类的系统。 用户的使用流程&#xff1a; 查看知识&#xff1a;搜索知识关键字 -> 点击查看知识内容 -…

Simulink仿真模块 - Delay

Delay:按固定或可变采样期间延迟输入信号 在仿真库中的位置为:Simulink / Commonly Used Blocks Simulink / Discrete HDL Coder / Commonly Used Blocks HDL Coder / Discrete 模型为: 双击模型打开参数设置界面,如图所示: 说明 Delay 模块会在一段延迟之后再输出模块的…

FreeRTOS ~(五)队列的常规使用 ~ (5/5)队列集

举例子说明&#xff1a;队列集的使用 队列集&#xff1a;Queue Set 多个队列的集合,一个队列中依次存放多个队列的句柄一般使用API的流程如下: 1.创建几个队列 2.创建队列集 3.把这几个队列添加进队列集中 然后可以创建任务去使用队列和队列集static QueueHandle_t xQueu…

[MySQL]可重复读下的幻读

一、幻读的定义 根据MySQL官网的描述&#xff0c;幻读是“相同的查询在不同时间返回了不同的结果” The so-called phantom problem occurs within a transaction when the same query produces different sets of rows at different times. 同时官网还举例说明了&#xff0c;如…

图形学 | 期末复习(上)| games101笔记 | 补档

博客基于GAMES101-现代计算机图形学入门-闫令琪&#xff0c;但不是其完整笔记&#xff0c;基于复习要求有一定的删减。考试以图形学入门基本概念和核心研究内容为主&#xff0c;少量公式。即以论述概念为主&#xff0c;涉及少量算法。p1:29:12是对应的games101视频节点&#xf…