vue 描述框[el-descriptions] 与之对应 div

图示

描述框【宽度做不了很大调整（易串行）】

<el-descriptions:column="2" size="large" width="500"  border  v-for="(v, i) in userCompany"  :key="i"><el-descriptions-itemlabel="企业名称"label-align="right"width="200px"class="u_company">{{ v.company_name }}<img class="active_c" :src="icon_company" alt="" /></el-descriptions-item><el-descriptions-item><el-link type="primary" @click="quitCompany">退出企业</el-link></el-descriptions-item><el-descriptions-item label="部门" label-align="right" width="200px">{{ v.group_name }}</el-descriptions-item><el-descriptions-item></el-descriptions-item></el-descriptions>

css

 :deep(.el-descriptions) {--el-descriptions-table-border: 1px solid #fff;}:deep(.el-descriptions__label) {font-size: 14px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #909399;}:deep(.el-descriptions__cell) {margin-right: 40px;padding-bottom: 32px;width: 200px;}:deep(.el-descriptions__content) {font-size: 14px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #303133;}
//最外面包一个大盒子【给宽度】.userinfo_content {width: 700px;padding-top: 75px;padding-bottom: 60px;margin: 0 auto;}

div

<div class="card_body fc" v-show="!showCompany"><div class="item_box" v-for="v in userCompany" :key="v.cid"><div class="item" ><div class="item_title">企业名称</div><div class="item_content fcs"><el-tooltipeffect="dark":content="v.company_name"placement="top"><div class="els item_content_box">{{v.company_name}}</div></el-tooltip><img class="active_c" :src="icon_company" alt="" /></div><el-link type="primary">退出企业</el-link></div><div class="item"><div class="item_title">分组</div><div class="item_content fcs">{{v.group_name}}</div></div></div></div>

css

.card_body {padding-left: 202px;.item_box{margin-top: 16px;&:first-child{margin-top: 0;}}.item {display: flex;align-items: center;margin-bottom: 32px;.item_title {color: #909399;margin-right: 40px;width: 100px;text-align: right;}.item_content {color: #303133;width: 360px;.item_content_box{width: 250px;}}}}

vue 描述框[el-descriptions] 与之对应 div相关推荐

vue单选框选中_使用vue如何默认选中单选框
使用了vue以后,发现这真的是一个灵活高效的框架,能够轻松实现页面的实时刷新. 那么,今天先聊聊单选框的使用.一般我们使用单选框,会这么写: //HTML one two three 有"c ...
vue单选框显示默认选中问题
vue单选框默认选中,如图: 不能默认显示代码 <Label>是否关键岗位</Label> <RadioGroup v-model="addPosition.i ...
教你从零写vue穿梭框
教你从零写vue穿梭框 1. 前言 2. 制作选择组件(select-input) 2. 制作vue穿梭框组件(table-transfer) 4. 将选择组件和穿梭框组件结合使用 4.1 点击选择组 ...
html js文本框文字列出,js实现文本框中输入文字页面中div层同步获取文本框内容的方法...
这篇文章主要介绍了js实现文本框中输入文字页面中div层同步获取文本框内容的方法,实例分析了javascript操作dom元素的技巧,需要的朋友可以参考下本文实例讲述了js实现文本框中输入文字页面中 ...
[Vue warn]: Attribute id is ignored on component div because the component is a fragment instanc
为什么80%的码农都做不了架构师?>>> 今天在使用vue框架搭建环境时,遇到这个错误提示: [Vue warn]: Attribute "id" is i ...
vue 弹框 select 获取不到值_vue dialog弹框拖拽
问题&需求描述: 在项目中,使用vue的<el-dialog></el-dialog> 弹出的框,不能拖拽.现需使其可进行鼠标点击拖拽. 解决方案: 在 src/uti ...
vue 单选框样式_作为一位Vue工程师，这些开发技巧你都会吗？
来源 | http://www.cnblogs.com/chanwahfung/p/12543103.html 路由参数解耦一般在组件内使用路由参数,大多数人会这样做: export default ...
【vue弹框和div拖拽功能】vue-elementul弹框拖拽功能，移动拖拽功能，普通div拖拽功能【拿来即用，直接复制】
前言这里是通过vue的指令封装好的直接创建一个js文件复制进去,引入一下就搞定了,非常简单 html版本引入vue语法的div和弹框拖拽功能这里是考虑到有时候会在html页面开发的时候也会用到这 ...
vue单选框选中_【vue+elementui】el-radio单选框默认选中以及v-model绑定值问题
难度值:⭐ 需求描述: 弹窗里面的表单,是复用的后台返回数据,输入框里面的数据复用很容易,通过prop属性即可. 问题在于radio单选框,怎么将后台给的数值绑定为默认值示例效果图: 涉及知识: 一 ...
vue 搜索框header_在Vue框架下使用Fullcalendar
原标题:在Vue框架下使用Fullcalendar Fullcalendar是一个非常受欢迎的日历日程处理的js组件,它功能强大,文档齐全,可定制化高,可与你的项目无缝对接.本站之前有很多文章介绍了F ...

vue 描述框[el-descriptions] 与之对应 div

图示

描述框【宽度做不了很大调整（易串行）】

css

div

css

vue 描述框[el-descriptions] 与之对应 div相关推荐

最新文章

热门文章