快捷導(dǎo)航

關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析

更新時(shí)間：2022年05月23日 11:38:05 作者：Shaojun_jita

這篇文章主要介紹了關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

el-col的使用,占據(jù)寬度的應(yīng)用

我們可以用組件el-col來(lái)操作一些盒子的所占份額。

給循環(huán)出來(lái)的el-col中,特定的el-col加自適應(yīng)滾動(dòng)條

關(guān)于如何在一個(gè)用循環(huán)寫(xiě)的el-row里面單獨(dú)設(shè)置el-col，并且給fileCause失敗原因加一個(gè)自適應(yīng)滾動(dòng)條，剛開(kāi)始不給el-col加div,只在span里面加滾動(dòng)條是不生效的，加了div，在div里面加滾動(dòng)條讓這個(gè)div包裹這個(gè)el-col就可以生效

（注意：要給div設(shè)置寬度和高度，如果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==='下發(fā)中'">{{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!=='下發(fā)中' && item.name !==$t('pages.authorityMgt.fileCause')">{{item.val}}</span>
      </el-col>
</el-row>

在這里插入圖片描述

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

VUE使用day.js顯示時(shí)分秒并實(shí)時(shí)更新時(shí)間效果實(shí)例
vue.js是目前比較流行的前端框架之一,它提供了非常多的基礎(chǔ)組件和工具庫(kù),以方便開(kāi)發(fā)者快速搭建具有可重用性的web應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于VUE使用day.js顯示時(shí)分秒并實(shí)時(shí)更新時(shí)間效果的相關(guān)資料,需要的朋友可以參考下
2024-04-04
vue中設(shè)置滾動(dòng)條方式
這篇文章主要介紹了在vue中設(shè)置滾動(dòng)條的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
圖解Vue?響應(yīng)式流程及原理
這篇文章主要為大家介紹了圖解Vue的響應(yīng)式原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
關(guān)于electron-vue打包后運(yùn)行白屏的解決方案
這篇文章主要介紹了關(guān)于electron-vue打包后運(yùn)行白屏的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
淺談vue中慎用style的scoped屬性
本篇文章主要介紹了淺談vue中慎用style的scoped屬性，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-11-11
Vue NextTick介紹與使用原理
我們對(duì)Vue中data數(shù)據(jù)的修改會(huì)導(dǎo)致界面對(duì)應(yīng)的響應(yīng)變化，而通過(guò)nextTick方法，可以在傳入nextTick的回調(diào)函數(shù)中獲取到變化后的DOM，講起來(lái)可能還是有點(diǎn)夢(mèng)幻，下面我們直接使用nextTick體驗(yàn)一下效果
2022-08-08
關(guān)于ElementUI的el-upload組件二次封裝的問(wèn)題
這篇文章主要介紹了關(guān)于ElementUI的el-upload組件二次封裝的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
mpvue項(xiàng)目中使用第三方UI組件庫(kù)的方法
這篇文章主要介紹了mpvue項(xiàng)目中使用第三方UI組件庫(kù)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue腳手架及vue-router基本使用
這篇文章主要介紹了vue腳手架及vue-router基本使用，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-04-04
vue實(shí)現(xiàn)節(jié)點(diǎn)增刪改功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)節(jié)點(diǎn)增刪改功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09