vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue 描述列表

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

作者：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 描述列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文