Element UI中的Descriptions描述列表

最新推荐文章于 2024-03-25 11:23:11 发布
最新推荐文章于 2024-03-25 11:23:11 发布
阅读量6k 收藏 1
点赞数
分类专栏： Web 文章标签： vue.js elementui 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41819893/article/details/127830697
版权

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

DF10F-0001A
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
类描述「Class Descriptions」-crx插件
03-23
将课程描述添加到UChicago课程网站 将课程描述添加到芝加哥大学的课程网站，目前由于某种原因没有这种能力。它在黑客@ uchicago的第一个黑客马拉松期间从Pete Vilter创建的数据库中提取描述。 支持语言:English
Vue2 Element description组件 列合并
白瑕 的博客
08-16 7950
需求是需要做成首行3列, 剩余行为4列, 额, 我说的是算上标签, 就像这样:你可能会说"啊, 你这个笨蛋为什么不去用labelStyle或者来消减表格呢?"我肯定是试过的啦…不行嘛.今天代码审查没过, 手里俩任务没交成, 今天一天还是在完善这俩任务, 唉.希望这篇文章能帮到你吧....
用Element -ui的Description组件动态展示组件内的信息
qq_52983535的博客
10-27 2421
用Element -ui的Description组件动态展示组件内的信息
用elementUI的descriptions描述列表 合并单元格 实现个人简历效果
monkey7
03-25 1033
element-ui的2.15.14版本出了个Descriptions 描述列表 可以用来展示数据项详情 分为带边框和不带边框。其中column属性是指 一行 Descriptions Item 的数量 默认是3个 如果超出会被挤到下一行。descriptions合并单元格效果 可以实现类似word简历的效果 主要改的是css样式
elementui 描述列表Descriptions组件宽度修改
热门推荐
NOyesNONO_的博客
05-31 3万+
注意，该项目基于常规vue-element-admin后台系统排版 问题样式1 描述列表占满了整个右侧主内容区域 解决1 <template> <el-descriptions title="描述列表1" :column="2" border> <el-descriptions-item label="备注1"> kooriookami </el-descriptions-item> <el-
使用element插件中Descriptions遇到的坑
m0_67394002的博客
03-06 4637
使用Descriptions 描述列表中的自定义label，打包后点击按钮新增一个el-descriptions-item时，最后一个item的标题发生改变 解决办法： 将以下代码替换 <el-descriptions-item label-align="center"> <template #label> <div class="cell-item"> <span c
商品列表（elementui+vue），在线预览地址请看描述
01-31
在线预览地址：http://120.79.17.80/product-list/ 商品列表（elementui+vue），在线预览地址若无法访问，可私聊作者获取最新在线预览地址 商品列表（elementui+vue），在线预览地址若无法访问，可私聊作者获取最新在线预览地址 商品列表（elementui+vue），在线预览地址若无法访问，可私聊作者获取最新在线预览地址 商品列表（elementui+vue），在线预览地址若无法访问，可私聊作者获取最新在线预览地址
element-ui 使用 el-descriptions
qq_34631220的博客
07-13 3224
【代码】element-ui 使用 el-descriptions。
Vue Element UI 自定义描述列表组件
m0_51666421的博客
08-26 4563
由于vue使用的版本太低，vue element UI 的描述列表不生效，但是有时候又不想换版本的可以自定义一个描述列表。
vue+element-ui的form多表单组件及Descriptions详情页面封装（可实现单页面有多个表单详情按模块的方式展示并且可以收缩）
web18798225112的博客
02-21 3548
一、最终效果 二、组件集成了以下功能 1、可以多模块配置form表单——配置formOpts对象 2、每个模块可以收起或展开——模块不设置title值取消此功能 3、每个模块可以自定义插槽设置 4、头部标题可以显示隐藏——有title则显示没有则隐藏 5、可以自定义设置footer操作按钮（默认：表单显示取消和保存按钮；详情显示取消按钮）——设置 :footer="null" 6、多表单校验不通过可以指定哪个模块 7、可以设置tabs（默认展示第一个tab；可以指定展示某一个根据setSelectedTa
Element UI自定义描述列表组件
Allen_kai_hui的博客
02-25 4725
功能 1、每行的高度根据改行中某一列的最大高度自动撑开2、列宽度自动补全，避免最后一列出现残缺的情况 3、支持纯文本与HTML插槽 4、支持每行几列的设置 5、支持每列宽度自定义6、支持动态数据重绘 组件设计 1、使用父子组件嵌套实现，父组件为 e-desc, 子组件为 e-desc-item 。 2、e-desc-item传递props的label 和 插槽的value，使用插槽$slots.content来显示DOM 3、利用 el-row 和 el-col 来实现整体组件布局 封装e-des.
metric_descriptions
04-06
指标描述 在熊猫官方/度量中实现的度量和伪度量的描述，示例和可视化。 指标分类为 与k有关 k结构 k随机 d间距
elementui 2.15.7 离线使用文档
07-06
elementui 2.15.7 离线文档 点击index.html 可以不联网查看使用方法等
Descriptions of timing in requirements for reactive systems
06-29
Descriptions of timing in requirements for reactive systems Descriptions of Timing in Requirements for Reactive Systems Hiromi Kobayashi Department of Management Engineering, Tokai University, Hiratsuka, 259-1292 Japan Kazuo Tokito Department of Computer Science, National Defense Academy, Yokosuka, 239-8686 Japan SUMMARY Timing analysis of physical objects is a significant element in requirements regarding the development of re- active systems to safeguard people and equipment. It is
简洁描述列表网页模板
01-22
简洁描述列表网页模板
基于vue + element UI 的后台管理系统模板
09-12
基于vue + element UI，实现登录页，系统主框架，动态路由的后台管理系统模板
浅谈element中InfiniteScroll按需引入的一点注意事项
11-20
大家为了节省空间，常常进行按需引入来节省空间，这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项。 针对前面element 按需引入的一些配置这里就不再详细介绍了。 那么这里讲的是在main.js写入以下...
q2a-tag-descriptions:为标签页中的标签和描述添加标题和图标。 这个插件对于 Q2A 的 SEO 必不可少
06-23
Q2A 标签说明 ...css 类“qa-tag-description”被添加到标签的描述容器中，以便于设置样式 安装 下载文件并将其解压缩到您的插件文件夹（例如qa-plugins/q2a-tag-description ）。 在 Q2A 中，转到Admin > P
descriptions:Common Lisp 的元级描述库
06-26
{} 说明概述{} descriptions是 Common Lisp 的元级描述库。 它的灵感来自 ，以及 。文档安装从下载源代码并从./sbcl/system (ln -s <system>)指向.asd系统定义文件，然后评估： (require :descriptions) ...
element-ui el-descriptions第一行
最新发布
03-27
element-ui中的el-descriptions是一个用于展示描述列表的组件。它可以将一组描述项以表格的形式展示出来，每一行包含一个标签和对应的值。 在el-descriptions中，第一行是通过设置label属性来定义的。label属性用于显示描述项的标签，可以是一个字符串或者一个slot。 以下是el-descriptions第一行的相关属性： 1. label：描述项的标签，可以是一个字符串或者一个slot。 2. span：描述项所占据的列数，默认为1。 3. label-width：描述项标签的宽度，可以是一个字符串或者一个数字。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DF10F-0001A

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值