代码编织梦想

ElementUI描述列表Descriptions设置自定义样式/修改固定宽度

1.在el-descriptions中添加 :label-style=“xxx” 和 :contentStyle=“xxx”

	<el-descriptions title="" :column="2" border :label-style="label_style" :contentStyle="content_style">
		<el-descriptions-item label="问卷ID">
			{{ rowData.dqmId }}
		</el-descriptions-item>
	
		<el-descriptions-item label="公司名称">
			{{ rowData.companyName }}
		</el-descriptions-item>
	
		<el-descriptions-item :span="2" label="问卷内容">
			{{ rowData.dqmText }}
		</el-descriptions-item>
	
		<el-descriptions-item label="启用状态">
			<template>
				<el-tag :type="rowData.status ? 'success' : 'danger'">
					{{ rowData.status ? '启用' : '停用' }}
				</el-tag>
			</template>
		</el-descriptions-item>
	
		<el-descriptions-item label="logo">
			<img :src="rowData.displayPicture" style="width: 120px" alt="" />
		</el-descriptions-item>
	</el-descriptions>

2.在data的return中写入相关数据

<script>
export default {
	data() {
		return {
			label_style: {
				'text-align': 'center',//文本居中
				'font-weight': '600',
				'height': '60px',
				'width': '30%',
				'word-break': 'keep-all'
			},
			content_style: {
				'text-align': 'center',
				'min-width': '200px',
				'word-break': 'break-all' //过长时自动换行
			}
		}
	},
	methods: {
	
	},
}

以上是本文全部内容,感谢查看!
欢迎参考,感谢指正!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/QinMN/article/details/138794166

vue+element-ui的form多表单组件及Descriptions详情页面封装(可实现单页面有多个表单/详情按模块的方式展示并且可以收缩)-爱代码爱编程

一、最终效果 二、组件集成了以下功能 1、可以多模块配置form表单——配置formOpts对象 2、每个模块可以收起或展开——模块不设置title值取消此功能 3、每个模块可以自定义插槽设置 4、头部标题可以显示隐藏——有title则显示没有则隐藏 5、可以自定义设置footer操作按钮(默认:表单显示取消和保存按钮;详情显示取消按钮)——设置

用element -ui的description组件动态展示组件内的信息_qq_52983535的博客-爱代码爱编程

                今天遇到的问题是我想要创建一个展示个人信息的描述列表,然后我就找到了Element里面的Description描述列表组件                 但在使用的时候就发现了一个问题,就是这个列表中对应属性的内容时通过创建列表时输入好的,我就没有办法通过Vue中的V-model来动态变化这里面的数据,更没有办法

element ui中的descriptions描述列表_df10f-0001a的博客-爱代码爱编程

使用html做一个简单的展示页面,包含Descriptions描述列表 Descriptions官方文档 基础用法 <el-descriptions title="用户信息"> <el-descriptions-item label="用户名">kooriookami</el-descriptions-ite

element-ui 使用 el-descriptions-爱代码爱编程

<el-descriptions :column="2" border size="mini" style="margin-top: 10px;" :labelStyle="{width: '123px'}" :contentStyle="{width:'42%'}"> <el-descriptions-item l

vue+element-ui el-descriptions 详情渲染组件二次封装(vue项目)-爱代码爱编程

目录 1、需求 2.想要的效果就是由图一变成图二 ​编辑 3.组件集成了以下功能 4.参数配置 示例代码 参数说明  5,组件  6.页面使用 1、需求 一般后台管理系统,通常页面都有增删改查;而查不外乎就是渲染新增/修改的数据(由输入框变成输入框禁用),因为输入框禁用后颜色透明度会降低,显的颜色偏暗;为解决这个需求

elementi-爱代码爱编程

1、在el-descriptions中添加下面相关代码 <el-descriptions :contentStyle="CS" :label-style="LS" direction="vertical" :column="4" border > <el-descriptions

用elementui的descriptions描述列表 合并单元格 实现个人简历效果_el-爱代码爱编程

element-ui的2.15.14版本出了个Descriptions 描述列表 可以用来展示数据项详情 分为带边框和不带边框 <el-descriptions title="用户信息"> <e

el-爱代码爱编程

笔者在做项目使用el-description时发现,为什么设置的lableStyle属性要么不生效,要么直接报错。 第一段讲述了笔者是如何遇到问题的,对解决方法感兴趣的朋友可以直接跳到第二段哦~😊 1. 情景再现 笔者这里用elementUI官方文档的示例重现一下。如下图所示,当前没什么问题(这是直接复制的‘自定义样式’示例) 官方文档:组件

el-爱代码爱编程

 1.代码实现: <el-descriptions :column="3" :contentStyle="CS" :label-style="LS" border class="margin-top" direction="vertical" title="基础信息">