el-form-item中表單項label和表單項內(nèi)容換行實現(xiàn)方法
更新時間：2023年09月22日 11:24:04 作者：Hyanl
這篇文章主要給大家介紹了el-form-item中表單項label和表單項內(nèi)容換行實現(xiàn)的相關(guān)資料,每個表單el-form由多個表單域el-form-item組成,需要的朋友可以參考下
elemnet ui的el-form-item的表單項label和表單項內(nèi)容原本是默認(rèn)在同一行顯示的，將el-form-item中表單項label和表單項內(nèi)容換行怎么實現(xiàn)呢？
效果如下：
法1：elemnetUI官方的方法label-position=“top”
法2：
思路：將el-form或者el-form-item中的label-width屬性去掉或者設(shè)置為0，如果label長度超出一行需要設(shè)置以下樣式屬性：加上如下樣式代碼：
<style scoped>
/deep/ .el-form-item__label{
text-align:left;
float: none;
word-break: break-word;
}
</style>附：el-form的label過長換行+根據(jù)label長度自動撐開
先上效果圖
1、在需要換行的label進(jìn)行改寫，以及綁定class
<el-form-item :label="'活動名稱\n（換行）'" class="fold_label" prop="name">
<el-input v-model="filterForm.name"></el-input>
</el-form-item>label中需要換行的地方加上‘\n’
2、css
/* 過于長的label分兩行展示樣式 */
.fold_label .el-form-item__label {
white-space: pre-line;
text-align-last: justify;
text-align: justify;
margin-top: -4px;
line-height: 25px;
text-justify: distribute-all-lines;
}
/* 其他label根據(jù)寬度自動撐開 */
.el-form-item__label {
text-align-last: justify;
text-align: justify;
text-justify: distribute-all-lines;
}這里如果不起作用可以用deep穿透一下
總結(jié)
到此這篇關(guān)于el-form-item中表單項label和表單項內(nèi)容換行實現(xiàn)的文章就介紹到這了,更多相關(guān)el-form-item表單項內(nèi)容換行內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
單向數(shù)據(jù)流方式使用一個上傳數(shù)據(jù)流和一個下傳數(shù)據(jù)流進(jìn)行雙向數(shù)據(jù)通信,兩個數(shù)據(jù)流之間相互獨(dú)立,下面這篇文章主要給大家介紹了關(guān)于vue單向數(shù)據(jù)流的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
axios從功能上來說就是主要用于我們前端向后端發(fā)送請求,是基于http客戶端的promise,面向瀏覽器和nodejs,下面這篇文章主要給大家介紹了關(guān)于Vue2中使用axios的3種方法,需要的朋友可以參考下2022-09-09
Vue自定義指令實現(xiàn)彈窗拖拽四邊拉伸及對角線拉伸效果
小編最近在做一個vue前端項目，需要實現(xiàn)彈窗的拖拽，四邊拉伸及對角線拉伸，以及彈窗邊界處理功能，本文通過實例代碼給大家分享我的實現(xiàn)過程及遇到問題解決方法，感興趣的朋友一起看看吧2021-08-08
vue使用Element組件時v-for循環(huán)里的表單項驗證方法
這篇文章主要介紹了vue使用Element組件時v-for循環(huán)里的表單項驗證方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了vue?input組件如何設(shè)置失焦與聚焦，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
一文詳解Pinia和Vuex與兩個Vue狀態(tài)管理模式
這篇文章主要介紹了一文詳解Pinia和Vuex與兩個Vue狀態(tài)管理模式，Pinia和Vuex一樣都是是vue的全局狀態(tài)管理器。其實Pinia就是Vuex5，只不過為了尊重原作者的貢獻(xiàn)就沿用了這個看起來很甜的名字Pinia2022-08-08
在vue3版本中，引入了一個新的函數(shù)，叫做setup。本文將通過實例為大家詳細(xì)講講Vue3.2中setup語法糖的使用，感興趣的小伙伴可以了解一下2022-07-07
今天小編就為大家分享一篇解決vue v-for src 圖片路徑問題 404，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue.js已成為現(xiàn)代Web開發(fā)中不可或缺的技術(shù)之一,雖然Vue.js的一些基礎(chǔ)概念和語法比較易學(xué),但深入挖掘Vue.js的核心概念和功能需要更多的實踐,下面這篇文章主要給大家介紹了關(guān)于Vue3封裝組件(帶回調(diào)事件)的相關(guān)資料,需要的朋友可以參考下2023-06-06
UniApp在Vue3下使用setup語法糖創(chuàng)建和使用自定義組件的操作方法
通過defineProps定義屬性,defineEmits定義事件,computed創(chuàng)建計算屬性,emitEvent方法觸發(fā)事件,在其他組件中導(dǎo)入并使用這些自定義組件,傳遞屬性和監(jiān)聽事件,實現(xiàn)組件的復(fù)用性和可維護(hù)性,感興趣的朋友跟隨小編一起看看吧2024-11-11