Vue El-descriptions 描述列表功能实现

 更新时间:2024年05月09日 10:37:02   作者:SZnA1  
这篇文章主要介绍了Vue El-descriptions 描述列表功能实现,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>

1.无数据时显示缺省符号,如无数据时显示- 

添加sass样式

// 描述列表无数据时显示 '-'
.el-descriptions
	.el-descriptions__body
	.el-descriptions-item__content:empty::after,
.el-descriptions
	.el-descriptions__body
	.el-descriptions-item__content
	> div:empty::after,
.el-descriptions
	.el-descriptions__body
	.el-descriptions-item__content
	> div
	> div:empty::after,
.el-descriptions
	.el-descriptions__body
	.el-descriptions-item__content
	.approval:empty::after,
.el-descriptions
	.el-descriptions__body
	.el-descriptions-item__content
	div:empty::after,
.el-descriptions
	.el-descriptions__body
	.el-descriptions-item__content
	.line-limit-length:empty::after {
	content: '-';
}

到此这篇关于VUE el-descriptions 描述列表的文章就介绍到这了,更多相关vue 描述列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue实现数据导出导入实战案例

    Vue实现数据导出导入实战案例

    我们经常需要在Vue搭建的后台管理系统里进行数据导入导出等操作,下面这篇文章主要给大家介绍了关于Vue实现数据导出导入实战案例的相关资料,需要的朋友可以参考下
    2023-01-01
  • Vue el-table表格第一列序号与复选框hover切换方式

    Vue el-table表格第一列序号与复选框hover切换方式

    这篇文章主要介绍了Vue el-table表格第一列序号与复选框hover切换方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue中provide、inject详解以及使用教程

    Vue中provide、inject详解以及使用教程

    provide和inject主要为高阶插件/组件库提供用例,并不推荐直接用于应用程序代码中,下面这篇文章主要给大家介绍了关于Vue中provide、inject详解以及使用的相关资料,需要的朋友可以参考下
    2022-11-11
  • Vue通过axios发送ajax请求基础演示

    Vue通过axios发送ajax请求基础演示

    这篇文章主要介绍了Vue通过axios发送ajax请求基础演示,包括了axios发送简单get请求,axios get传参,axios发送post请求等基础代码演示需要的朋友可以参考下
    2023-02-02
  • vant开发微信小程序安装以及简单使用教程

    vant开发微信小程序安装以及简单使用教程

    这篇文章主要介绍了vant开发微信小程序安装以及简单使用教程,需要的朋友可以参考下
    2022-12-12
  • 在Vue3+ECharts中图表tooltip不显示问题分析和解决方法

    在Vue3+ECharts中图表tooltip不显示问题分析和解决方法

    文章主要描述了在Vue3中使用ECharts时遇到的tooltip不显示问题,通过分析问题根源和修改方式,最终使用markRaw()工具函数解决了问题,文章详细解释了Vue和ECharts的工作原理以及markRaw的作用,最后提供了完整的修复代码示例,需要的朋友可以参考下
    2026-02-02
  • vue3一些不常用却很实用API汇总

    vue3一些不常用却很实用API汇总

    Vue3提供了许多常用的API,这些API可以帮助开发者更高效地构建和管理Vue应用,这篇文章主要介绍了vue3一些不常用却很实用API的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2026-02-02
  • vue3中实现组件通信的方法总结

    vue3中实现组件通信的方法总结

    在Vue3中,有多种方法可以实现组件之间的通信,本文就通过代码示例给大家总结一些vue3实现组件通信的常用方法,需要的朋友可以参考下
    2023-06-06
  • 简易Vue评论框架的实现(父组件的实现)

    简易Vue评论框架的实现(父组件的实现)

    本篇文章主要介绍了简易 Vue 评论框架的实现(父组件的实现),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • webpack+vue+express(hot)热启动调试简单配置方法

    webpack+vue+express(hot)热启动调试简单配置方法

    今天小编就为大家分享一篇webpack+vue + express (hot) 热启动调试简单配置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论