關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析
更新時間：2022年05月23日 11:38:05 作者：Shaojun_jita
這篇文章主要介紹了關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
el-col的使用,占據(jù)寬度的應(yīng)用
我們可以用組件el-col來操作一些盒子的所占份額。
給循環(huán)出來的el-col中,特定的el-col加自適應(yīng)滾動條
關(guān)于如何在一個用循環(huán)寫的el-row里面單獨設(shè)置el-col，并且給fileCause失敗原因加一個自適應(yīng)滾動條，剛開始不給el-col加div,只在span里面加滾動條是不生效的，加了div，在div里面加滾動條讓這個div包裹這個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>
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue.js是目前比較流行的前端框架之一,它提供了非常多的基礎(chǔ)組件和工具庫,以方便開發(fā)者快速搭建具有可重用性的web應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于VUE使用day.js顯示時分秒并實時更新時間效果的相關(guān)資料,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了在vue中設(shè)置滾動條的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家介紹了圖解Vue的響應(yīng)式原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
關(guān)于electron-vue打包后運(yùn)行白屏的解決方案
這篇文章主要介紹了關(guān)于electron-vue打包后運(yùn)行白屏的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本篇文章主要介紹了淺談vue中慎用style的scoped屬性，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
我們對Vue中data數(shù)據(jù)的修改會導(dǎo)致界面對應(yīng)的響應(yīng)變化，而通過nextTick方法，可以在傳入nextTick的回調(diào)函數(shù)中獲取到變化后的DOM，講起來可能還是有點夢幻，下面我們直接使用nextTick體驗一下效果2022-08-08
關(guān)于ElementUI的el-upload組件二次封裝的問題
這篇文章主要介紹了關(guān)于ElementUI的el-upload組件二次封裝的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了mpvue項目中使用第三方UI組件庫的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue腳手架及vue-router基本使用，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)節(jié)點增刪改功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09