Element UI中的Descriptions描述列表
2024-05-28 06:09:38
使用html做一个简单的展示页面，包含Descriptions描述列表
Descriptions官方文档
基础用法
<el-descriptions title="用户信息"><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-tag size="small">学校</el-tag></el-descriptions-item><el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
</el-descriptions>完整代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head><body><div id='app'><el-descriptions title='基本信息' direction='descriptions' :size='size' :column="2" :border='true'><el-descriptions-item label='id' label-class-name="my-label" content-class-name="my-content">1</el-descriptions-item><el-descriptions-item label='创建时间'>2007-11-01</el-descriptions-item><el-descriptions-item label='更新时间'>2007-11-01</el-descriptions-item><el-descriptions-item label='姓名'>张三</el-descriptions-item><el-descriptions-item label='公司'>OneDayday</el-descriptions-item><el-descriptions-item label='别名'>张二</el-descriptions-item><el-descriptions-item label='标志'>state</el-descriptions-item></el-descriptions><el-descriptions title='详细信息' direction='descriptions' :size='size' :column="2" :border='true'><el-descriptions-item label='id' label-class-name="my-label" content-class-name="my-content">1</el-descriptions-item><el-descriptions-item label='创建时间戳'>2022.10.18 12:12</el-descriptions-item><el-descriptions-item label='更新时间戳'>2022.10.18 12:22</el-descriptions-item><el-descriptions-item label='创建时间'>2022.10.18 12:12</el-descriptions-item><el-descriptions-item label='更新时间'>2022.10.18 12:22</el-descriptions-item><el-descriptions-item label='型号'>WQ/89——a20</el-descriptions-item><el-descriptions-item label='制造商'>华为技术有限公司</el-descriptions-item><el-descriptions-item label='生产日期'>2007.10.18 12:22</el-descriptions-item><el-descriptions-item label='介绍'>天机8100，120w</el-descriptions-item></el-descriptions><el-descriptions title='详细参数' direction='descriptions' :size='size' :column="2" :border='true'><el-descriptions-item label='id' label-class-name="my-label" content-class-name="my-content">1</el-descriptions-item><el-descriptions-item label='创建时间戳'>2022.10.18 12:12</el-descriptions-item><el-descriptions-item label='更新时间戳'>2022.10.18 12:22</el-descriptions-item><el-descriptions-item label='创建时间戳'>2022.10.18 12:12</el-descriptions-item><el-descriptions-item label='更新时间'>2022.10.18 12:22</el-descriptions-item><el-descriptions-item label='天数'>30</el-descriptions-item><el-descriptions-item label='生产日期'>2007-11-01</el-descriptions-item><el-descriptions-item label='备注'>remark</el-descriptions-item></el-descriptions></div>
</body></html>
<style>/* 颜色 *//* .my-label {background: #0AFFFF;}.my-content {background: #FDE2E2;} */
</style>
<script>new Vue({el: '#app',data() {return {size: '',}},methods: {}})
</script>Element UI中的Descriptions描述列表相关推荐
- element ui中穿梭框等列表文字显示过长隐藏问题处理
主要记录一下element ui组件中穿梭框.table列表内容显示不全解决方式 对于Transfer 穿梭框中的文字过长隐藏问题处理: 1.实现效果: 解决方式; 1. <el-row :gu ...
- Element UI中Steps 步骤条description描述换行展示
突然要求加了个显示字段,之前的代码只能显示一行,于是乎找到了解决办法,代码如下:其中的属性自行到官网查看释义吧:Element UI官网传送门 <el-table><!-- 可展开的 ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- NG-ZORRO Descriptions描述列表自定义title样式（nz-descriptions-item）
如何在NG-ZORRO组件的描述列表中自定义nz-title样式 需求描述: 使用NG-ZORRO组件中的Descriptions描述列表显示预约模块基础信息,物流组确认流程节点时,需要可以修改预约时 ...
- Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
- Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
- element ui 中 el-checkbox-group 点击一个全部选中的问题
element ui 中 el-checkbox-group 点击一个全部选中的问题 原因是:checkbox-group中的v-modle要单独一个数组对象,不能作为表单对象,ruleForm中的一 ...
- 修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
- element ui中的el-dropdown（下拉框）防止点一下就隐藏的问题
element ui中的el-dropdown(下拉框)防止点一下就影藏的问题 当使用el-dropdown下拉框时,下拉框的每项中,可能需要加入@click.@change或复选框等事件,而el-d ...
最新文章
- 云南林业职业技术学院计算机考试试题,云南林业职业技术学院单招模拟题(含解析)9.docx...
- error: index-pack died of signal fatal: index-pack failed【Git】
- spark mllib 朴素贝叶斯 naive bayes
- 一文读懂常用日志框架（Log4j、SLF4J、Logback）有啥区别
- sklearn中cross_validation包无法使用
- 【maven】maven的介绍
- c语言 strupr,C语言 strupr()用法及代码示例
- ftp服务器文件上传代码,Java上传文件FTP服务器代码
- python用哪种字体比较好_女生练哪种字体比较好？适合女生写的漂亮字体推荐
- 《人工智能-一种现代的方法》阅读笔记
- MFC Windows程序设计 读书笔记1
- 图文解析大二层网络及VxLAN技术
- 区分单音节，双音节和多音节
- [摘录]第4章 不道德的谈判策略
- futuretask java 并发请求_【Java并发】Runnable、Callable、Future、FutureTask
- RSA--------------
- 消遣时间的小程序有哪些？这3个好玩又有趣的游戏小程序送给你！
- 富文本关键字搜索高亮，解决方法及优化（收藏！）
- 【花雕动手做】有趣好玩的音乐可视化系列小项目（18）--LED平面板灯
- Vue.js高效前端开发 • 【初识Vue.js】