elementui 描述列表Descriptions组件宽度修改

注意，该项目基于常规vue-element-admin后台系统排版

问题样式1

描述列表占满了整个右侧主内容区域

解决1

<template><div class="descWrap"><el-descriptions title="描述列表1" :column="2" border><el-descriptions-item label="备注1">kooriookami</el-descriptions-item><el-descriptions-item label="备注2">kooriookami</el-descriptions-item></el-descriptions><el-descriptions title="描述列表2" :column="2" border><el-descriptions-item label="备注">kooriookami</el-descriptions-item></el-descriptions></div>
</template>


<style scoped>
>>> .el-descriptions__body {width: 70%;
}
</style>

这样就可以用百分比修改宽度了。再加上自己想要的margin值。
或者，给描述列表外边套一层，给套的这层设置宽度，再加padding值，也可以实现，限制总宽度。

样式问题2

当一个页面有俩个列表时，一个列表是4列，一个是2列，这样每列的宽度分布不一样，看起来不够整齐。

解决2

给el-descriptions-item加上:contentStyle='contentStyle' :labelStyle='labelStyle'

  <div class="descWrap"><el-descriptions title="描述列表1" :column="2" border><el-descriptions-item label="备注1" :contentStyle='contentStyle' :labelStyle='labelStyle'>kooriookami</el-descriptions-item><el-descriptions-item label="备注2" :contentStyle='contentStyle' :labelStyle='labelStyle'>kooriookami</el-descriptions-item></el-descriptions><el-descriptions title="描述列表2" :column="2" border><el-descriptions-item label="备注" :contentStyle='contentStyle' :labelStyle='labelStyle'>kooriookami</el-descriptions-item></el-descriptions></div>

并在data中定义

<script>
export default {name: "BankBillDetail",data() {return {//内容样式contentStyle: {'text-align': 'center',},//label样式labelStyle: { 'width': '200px' }}}
}
</script>

文档参考elementUI官方文档中的自定义样式

elementui 描述列表Descriptions组件宽度修改相关推荐

vue2 elementui描述列表
先看效果,elementui2.15.7支持el-descriptions,低版本的不支持.我是初学者,这里有几个要点 flex布局.滚动条样式等, 1 mock造数 mock这里使用了正则来造日期和 ...
NG-ZORRO Descriptions描述列表自定义title样式（nz-descriptions-item）
如何在NG-ZORRO组件的描述列表中自定义nz-title样式需求描述: 使用NG-ZORRO组件中的Descriptions描述列表显示预约模块基础信息,物流组确认流程节点时,需要可以修改预约时 ...
前端Vue+ElementUI的Pagination分页组件实现分页展示后端Spring Boot +Mybatis Plus实现分页接口
前端Vue+ElementUI的Pagination分页组件实现分页展示 & 后端Spring Boot +Mybatis Plus实现分页接口很久没有更新博客了,主要原因是博主一直在补充自 ...
《React Native移动开发实战》一一3.4 完善商品列表——ListView组件
3.4 完善商品列表--ListView组件在完善了搜索框和轮播广告之后,对电商应用的首页的改造已经初见成效.最后,我们要让商品列表的内容也变得更加丰富. 3.4.1 对图片资源进行重构添加商品图 ...
Vue3 element-ui实现Pagination分页组件--封装分页
什么是Pagination分页组件? 在 B 端的 web 开发中,分页组件或者叫分页器,是较为常用的控件之一,通常配合表格或列表,实现数据量大的情况下,分页拆解数据的功能. 1.scrollTo和滚 ...
elementUI自定义查看详情组件
elementUI没有查看详情组件,每次都要自己写详情比较不方便详情组件效果图,可以放弹出框,放页面当中声明seeData 要展示的顺序及类型类型type的为selectList,将自动渲染成 ...
055_Descriptions描述列表
1. Descriptions描述列表 1.1. 列表形式展示多个字段. 1.2. Descriptions Attributes 参数说明类型可选值默认值 border 是否带有边框 boo ...
elementUI多选框组件：多选数组，取值问题
elementUI多选框组件:多选数组,取值问题效果图: <templete>部分:  <!-- 已发布职位list列表 --& ...
vant 引进单个样式_vue 公共列表选择组件,引用Vant-UI的样式方式
此组件用于公共选择组件.引用Vant UI 作为样式特性: 1.支持动态.静态数据源. 2.支持分页加载. 3.支持模糊搜索. 4.支持单选.多选. 组件源码: 确认 v-model="l ...
vue3 - 仿 element-ui Breadcrumb 面包屑组件封装自己的面包屑组件
仿 element-ui Breadcrumb 面包屑组件封装自己的面包屑组件 element-ui 面包屑结构 <el-breadcrumb separator="/"&g ...

elementui 描述列表Descriptions组件宽度修改

问题样式1

解决1

样式问题2

解决2

elementui 描述列表Descriptions组件宽度修改相关推荐

最新文章

热门文章