关于el-col的使用,占据宽度的应用解析

目录
  • el-col的使用,占据宽度的应用
  • 给循环出来的el-col中,特定的el-col加自适应滚动条

el-col的使用,占据宽度的应用

我们可以用组件el-col来操作一些盒子的所占份额。

给循环出来的el-col中,特定的el-col加自适应滚动条

关于如何在一个用循环写的el-row里面单独设置el-col，并且给fileCause失败原因加一个自适应滚动条，刚开始不给el-col加div,只在span里面加滚动条是不生效的，加了div，在div里面加滚动条让这个div包裹这个el-col就可以生效

（注意：要给div设置宽度和高度，如果div在其他东西里面，自己被包围着，要加position:relative）

<el-row v-for="(item, index) in detailInfo" :key="index" type="flex">
      <el-col :class="index===detailInfo.length - 1 ? 'left last-right' : 'left'" :span="5">{{item.name}}</el-col>
      <el-col :class="index===detailInfo.length - 1 ? 'right last-right' : 'right'" :span="19" :show-overflow-tooltip="true">
        <span style="color:#70B603;" v-if="item.name === $t('pages.authorityMgt.sendRes')&&item.val==='成功'">{{item.val}}</span>
        <span style="color:#D9001B;" v-if="item.name === $t('pages.authorityMgt.sendRes')&&item.val==='失败'">{{item.val}}</span>
        <span style="color:#02A7F0;"  v-if="item.name === $t('pages.authorityMgt.sendRes')&&item.val==='下发中'">{{item.val}}</span>
        <div style="position:relative; overflow: auto; width: 580px; height: 40px;"><span style="color: #606266;"  v-if="item.name === $t('pages.authorityMgt.fileCause')">{{item.val}}</span></div>
        <span v-if="item.val!=='成功' && item.val!=='失败' && item.val!=='下发中' && item.name !==$t('pages.authorityMgt.fileCause')">{{item.val}}</span>
      </el-col>
</el-row>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Element-ui Layout布局(Row和Col组件)的实现

    目录 基本说明以及用法 Row组件的分析 render函数 源码分析 Col组件的分析 组件分析 响应式布局 我们在实际开发中遇到一些布局的时候会用到Layout布局,这个布局只要配置一些参数就能够达到很好的布局效果甚至可以响应式,那里面的具体是怎么实现的呢,让我们去剖开Element-UI的源码,学习里面的一些细节吧. 基本说明以及用法 Element-UI的Layout布局是通过基础的24分栏,迅速简便地创建布局.根据不同的组合,很快的就能够生成一个很美观的响应式布局.具体的用法如下: <e

  • Element-UI 使用el-row 分栏布局的教程

    使用多个卡片显示的时候,并且要求当列数到一定数目的时候,要自动换行,el-container 布局就满足了需求了,就要用到el-row 布局做分栏处理, 代码如下 <template> <el-row :gutter="20" class="el-row" type="flex" > <el-col :span="8" v-for = "(item,index) in apps"

  • element修改form的el-input宽度,el-select宽度的方法实现

    element修改form的el-input宽度,el-select宽度的方法实现

    自从用了element-ui,确实好用,该有的组件都有,但是组件间的样式都固定好了,有时候像form表单这样,页面的input.select等宽度不一定会是一样的,可能有些长,有些短,这时候改变这些控件的宽度就有点麻烦了. 看了网上的好多文章,都没有找到解决方案,很多都说在el-input里面加width,但是效果不好,简单总结一下这个 例如我想要这种效果,把描述和邮箱都的宽度width设置长一点 首先在el-select里面增加style=“width:500px”,发现没有效果,为什么呢,因

  • 关于el-col的使用,占据宽度的应用解析

    关于el-col的使用,占据宽度的应用解析

    目录 el-col的使用,占据宽度的应用 给循环出来的el-col中,特定的el-col加自适应滚动条 el-col的使用,占据宽度的应用 我们可以用组件el-col来操作一些盒子的所占份额. 给循环出来的el-col中,特定的el-col加自适应滚动条 关于如何在一个用循环写的el-row里面单独设置el-col,并且给fileCause失败原因加一个自适应滚动条,刚开始不给el-col加div,只在span里面加滚动条是不生效的,加了div,在div里面加滚动条让这个div包裹这个el-co

  • el-table表头根据内容自适应完美解决表头错位和固定列错位

    将代码复制到指令中即可使用.通过指令方式进行调用.(使用方式 <el-table v-tableFit></el-table>) 通过计算文字的宽度进行表头设置,其他内容无法计算. 5000个单元格以上根据实际情况使用以上根据实际情况使用,因为单元格越多,计算时间越长. 尽量使用v-if,不然有些情况下会计算错误. Vue.directive("tableFit", { //指令所在组件的 VNode 及其子 VNode 全部更新后调用. componentUp

  • layui框架教程

    目录 LayUI LayUI的特点 LayUI 基本使用 页面元素 布局 栅格系统 响应式规则 列边距: 列偏移 列嵌套 基本元素 按钮 主题 中间是空心: 尺寸: 流体自适应 圆角 图标 导航 垂直样式+侧边 背景颜色 徽章 面包屑 选项卡 风格 带删除 表格 风格 表单 输入框 下拉框 复选框 开关 单选框 文本域 组装行内表单 忽略美化渲染 方框效果 弹出层 LayUI layui(谐音:类 UI) 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CS

  • js实现百度登录框鼠标拖拽效果

    js实现百度登录框鼠标拖拽效果

    以百度的登录窗口为例,学习鼠标拖拽效果如何实现,拖拽范围限定以及登录窗口自动居中.学会如何制作弹出窗口特效,了解把元素设置为可拖拽的原理. 知识点: 1.掌握对可拖拽对话框的实现原理 2.了解元素如何触发脚本方法以及如何编写侦听事件 3. 学会设置元素在页面中居中和全屏 注意区别: 1.screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. 2.clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照

  • jquery实现百叶窗效果

    今天试着用jq写了下图片百叶窗效果,就是鼠标经过那张图,那张图显示,其他图片缩小~ 最开始看效果的时候觉得好复杂,以为是宽度的变化写的动画,但是后来细想,如果是宽度变化,那么图片变窄的时候肯定会失真了,后来经过学习,发现原来原理很简单: 基本原理就是,将图片都绝对定位到盒子里,然后分别定位,平分整个盒子,图片就会显示一种层叠效果了(本案例是通过left值控制位置):然后通过jq控制,当鼠标经过某张图片的时候这张图片完全显示(即left值进行变化),其他图片的left值也进行相应的改变. 文字描述

  • Android五大布局与实际应用详解

    Android五大布局与实际应用详解

    Android总体有五大布局: 线性布局(LiearLayout): 屏幕垂直或水平方向布局. 帧布局(FrameLayout):控件从屏幕左上角开始布局. 相对布局(RelativeLayout): 以其他控件为参照布局. 绝对布局(AbsoluteLayout):以屏幕坐标布局. 表格布局(TableLayout):按照行列方式布局. 一.LinearLayout 线性布局在开发中使用最多,具有垂直方向与水平方向的布局方式,通过设置属性"android:orientation"控制

  • vue基于Echarts的拖拽数据可视化功能实现

    vue基于Echarts的拖拽数据可视化功能实现

    背景 我司产品提出了一个需求,做一个数据基于Echars的可拖拽缩放的数据可视化,上网百度了一番,结果出现了两种结局,一种花钱买成熟产品(公司不出钱),一种没有成熟代码,只能自己写了,故事即将开始,敬请期待.......  不,还是先上一张效果图吧,请看...... 前期知识点 1. offset(偏移量) 定义:当前元素在屏幕上占用的空间,如下图: 其中: offsetHeight: 该元素在垂直方向上的占用的空间,单位为px,不包括margin. offsetWidth:该元素在水平方向上的

  • 原生JS实现可拖拽登录框

    原生JS实现可拖拽登录框

    本文分享一个用原生JS实现的可拖拽登录框,效果如下: 实现的代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现可拖拽登录框</title> <style type="text/css"

  • JS实现简单的操作杆旋转示例详解

    目录 一.实现效果 二.组成部分 目标 三.代码实现 1.操作控制 2.dom对象操作类 3.用法 总结与思考 一.实现效果 JS 简单的操作杆旋转实现 首先说明一下,请直接忽略背景图,这里主要实现的是杆旋转控制方向盘旋转. 鼠标移出控制区域,控制球复位 二.组成部分 创建 ballOption.js 文件,用以绑定控制球指定 dom,并初始化相关操作 创建 eleOption.js 文件,用以实现一些频繁的 dom 操作 主要是通过鼠标滑动事件控制“控制球”位置更改及获取以屏幕上方向为0度的角

  • Struts 2中的constant配置详解

    1.<constant name="struts.i18n.encoding" value="UTF-8" /> 指定Web应用的默认编码集,相当于调用 HttpServletRequest的setCharacterEncoding方法. 2.<constant name="struts.i18n.reload" value="false"/> 该属性设置是否每次HTTP请求到达时,系统都重新加载资源文

随机推荐