關(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來操作一些盒子的所占份額。
給循環(huán)出來的el-col中,特定的el-col加自適應(yīng)滾動(dòng)條
關(guān)于如何在一個(gè)用循環(huán)寫的el-row里面單獨(dú)設(shè)置el-col，并且給fileCause失敗原因加一個(gè)自適應(yīng)滾動(dòng)條，剛開始不給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)文章
vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實(shí)現(xiàn)
本文主要介紹了vue3中處理不同數(shù)據(jù)結(jié)構(gòu)JSON的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
vue3 響應(yīng)式對(duì)象如何實(shí)現(xiàn)方法的不同點(diǎn)
這篇文章主要介紹了vue3 響應(yīng)式對(duì)象如何實(shí)現(xiàn)方法的不同點(diǎn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要給大家介紹了關(guān)于vue通過video.js解決m3u8視頻播放格式的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Vue3如何根據(jù)搜索框內(nèi)容跳轉(zhuǎn)至本頁面指定位置
在開發(fā)中我們經(jīng)常遇到這樣的需求,根據(jù)要求跳轉(zhuǎn)至本頁面指定位置,這篇文章主要給大家介紹了關(guān)于Vue3如何根據(jù)搜索框內(nèi)容跳轉(zhuǎn)至本頁面指定位置的相關(guān)資料,需要的朋友可以參考下2022-11-11
基于 Vue 實(shí)現(xiàn)一個(gè)酷炫的 menu插件
本文給大家介紹基于 Vue 實(shí)現(xiàn)一個(gè)酷炫的 menu插件，此篇教程需要大家具備一定的css和vue基礎(chǔ)知識(shí)，本文分步驟給大家介紹的非常詳細(xì)，需要的朋友參考下吧2017-11-11
Vant Uploader實(shí)現(xiàn)上傳一張或多張圖片組件
這篇文章主要為大家詳細(xì)介紹了Vant Uploader實(shí)現(xiàn)上傳一張或多張圖片組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
本文主要介紹了?vue全局引入scss,我們?cè)趯慥UE的時(shí)候,會(huì)使用scss，也會(huì)做一些通用樣式,方便使用,在寫好的通用樣式的時(shí)候,每次都要單文件導(dǎo)入,剛開始寫的時(shí)候,感覺還好,后面工程量大了后,就顯得麻煩,那么本文就全局導(dǎo)入scss樣式,下面來看詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
vue中過濾器的作用可被用于一些常見的文本格式化,也就是修飾文本,但是文本內(nèi)容不會(huì)改變,下面這篇文章主要給大家介紹了關(guān)于VUE中filters過濾器的兩種用法,需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了Ant Design封裝年份選擇組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue中touch和click共存的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07