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+Node实现商品列表的分页、排序、筛选,添加购物车功能详解

    Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解

    这篇文章主要介绍了Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能,结合实例形式分析了vue.js前台商品分页、排序、筛选等功能及后台node.js处理技巧,需要的朋友可以参考下
    2019-12-12
  • Vue EventBus自定义组件事件传递

    Vue EventBus自定义组件事件传递

    这篇文章主要介绍了Vue EventBus自定义组件事件传递,组件化应用构建是Vue的特点之一,本文主要介绍EventBus进行数据消息传递 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue中ref引用操作DOM元素的实现

    vue中ref引用操作DOM元素的实现

    本文主要介绍了vue中ref引用操作DOM元素的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • 前端开发指南之vue-grid-layout的使用实例

    前端开发指南之vue-grid-layout的使用实例

    vue-grid-layout是一个vue栅格拖动布局的组件,下面这篇文章主要给大家介绍了关于前端开发指南之vue-grid-layout使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Vue3组合式API中使用forwardRef()函数

    Vue3组合式API中使用forwardRef()函数

    本文主要介绍了Vue3组合式API中使用forwardRef()函数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • Vue.js 2.0中select级联下拉框实例

    Vue.js 2.0中select级联下拉框实例

    在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用,需要的朋友可以参考下
    2017-03-03
  • vue3+ElementPlus+VueCropper实现上传图片功能

    vue3+ElementPlus+VueCropper实现上传图片功能

    文章介绍了如何在Vue3、ElementPlus和VueCropper组件中实现图片上传和裁剪功能,包括放大、缩小等操作,感兴趣的朋友跟随小编一起看看吧
    2025-01-01
  • vue v-model的详细讲解(推荐!)

    vue v-model的详细讲解(推荐!)

    vue中经常使用到和这类表单元素,vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别,下面这篇文章主要给大家介绍了关于vue v-model的相关资料,需要的朋友可以参考下
    2022-04-04
  • vue 遮罩层阻止默认滚动事件操作

    vue 遮罩层阻止默认滚动事件操作

    这篇文章主要介绍了vue 遮罩层阻止默认滚动事件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能

    基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能

    这篇文章主要介绍了基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01

最新评论