快捷導(dǎo)航

el-form-item中表單項(xiàng)label和表單項(xiàng)內(nèi)容換行實(shí)現(xiàn)方法

更新時(shí)間：2023年09月22日 11:24:04 作者：Hyanl

這篇文章主要給大家介紹了el-form-item中表單項(xiàng)label和表單項(xiàng)內(nèi)容換行實(shí)現(xiàn)的相關(guān)資料,每個(gè)表單el-form由多個(gè)表單域el-form-item組成,需要的朋友可以參考下

elemnet ui的el-form-item的表單項(xiàng)label和表單項(xiàng)內(nèi)容原本是默認(rèn)在同一行顯示的，將el-form-item中表單項(xiàng)label和表單項(xiàng)內(nèi)容換行怎么實(shí)現(xiàn)呢？

效果如下：

法1：elemnetUI官方的方法label-position=“top”

法2：

思路：將el-form或者el-form-item中的label-width屬性去掉或者設(shè)置為0，如果label長(zhǎng)度超出一行需要設(shè)置以下樣式屬性：加上如下樣式代碼：

<style scoped>
/deep/ .el-form-item__label{
  text-align:left;
  float: none;
  word-break: break-word;
}
</style>

附：el-form的label過(guò)長(zhǎng)換行+根據(jù)label長(zhǎng)度自動(dòng)撐開

先上效果圖

1、在需要換行的label進(jìn)行改寫，以及綁定class

<el-form-item :label="'活動(dòng)名稱\n（換行）'" class="fold_label" prop="name">
            <el-input v-model="filterForm.name"></el-input>
          </el-form-item>

label中需要換行的地方加上‘\n’
2、css

/* 過(guò)于長(zhǎng)的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ù)寬度自動(dòng)撐開 */
.el-form-item__label {
  text-align-last: justify;
  text-align: justify;
  text-justify: distribute-all-lines;
}

這里如果不起作用可以用deep穿透一下

總結(jié)

到此這篇關(guān)于el-form-item中表單項(xiàng)label和表單項(xiàng)內(nèi)容換行實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)el-form-item表單項(xiàng)內(nèi)容換行內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue單向數(shù)據(jù)流的深入講解
單向數(shù)據(jù)流方式使用一個(gè)上傳數(shù)據(jù)流和一個(gè)下傳數(shù)據(jù)流進(jìn)行雙向數(shù)據(jù)通信,兩個(gè)數(shù)據(jù)流之間相互獨(dú)立,下面這篇文章主要給大家介紹了關(guān)于vue單向數(shù)據(jù)流的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-07-07
Vue2中使用axios的3種方法實(shí)例總結(jié)
axios從功能上來(lái)說(shuō)就是主要用于我們前端向后端發(fā)送請(qǐng)求,是基于http客戶端的promise,面向?yàn)g覽器和nodejs,下面這篇文章主要給大家介紹了關(guān)于Vue2中使用axios的3種方法,需要的朋友可以參考下
2022-09-09
Vue自定義指令實(shí)現(xiàn)彈窗拖拽四邊拉伸及對(duì)角線拉伸效果
小編最近在做一個(gè)vue前端項(xiàng)目，需要實(shí)現(xiàn)彈窗的拖拽，四邊拉伸及對(duì)角線拉伸，以及彈窗邊界處理功能，本文通過(guò)實(shí)例代碼給大家分享我的實(shí)現(xiàn)過(guò)程及遇到問(wèn)題解決方法，感興趣的朋友一起看看吧
2021-08-08
vue使用Element組件時(shí)v-for循環(huán)里的表單項(xiàng)驗(yàn)證方法
這篇文章主要介紹了vue使用Element組件時(shí)v-for循環(huán)里的表單項(xiàng)驗(yàn)證方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
vue?input組件如何設(shè)置失焦與聚焦
這篇文章主要介紹了vue?input組件如何設(shè)置失焦與聚焦，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
一文詳解Pinia和Vuex與兩個(gè)Vue狀態(tài)管理模式
這篇文章主要介紹了一文詳解Pinia和Vuex與兩個(gè)Vue狀態(tài)管理模式，Pinia和Vuex一樣都是是vue的全局狀態(tài)管理器。其實(shí)Pinia就是Vuex5，只不過(guò)為了尊重原作者的貢獻(xiàn)就沿用了這個(gè)看起來(lái)很甜的名字Pinia
2022-08-08
一文搞懂Vue3.2中setup語(yǔ)法糖使用
在vue3版本中，引入了一個(gè)新的函數(shù)，叫做setup。本文將通過(guò)實(shí)例為大家詳細(xì)講講Vue3.2中setup語(yǔ)法糖的使用，感興趣的小伙伴可以了解一下
2022-07-07
解決vue v-for src 圖片路徑問(wèn)題 404
今天小編就為大家分享一篇解決vue v-for src 圖片路徑問(wèn)題 404，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
Vue3封裝組件完整實(shí)例(帶回調(diào)事件)
Vue.js已成為現(xiàn)代Web開發(fā)中不可或缺的技術(shù)之一,雖然Vue.js的一些基礎(chǔ)概念和語(yǔ)法比較易學(xué),但深入挖掘Vue.js的核心概念和功能需要更多的實(shí)踐,下面這篇文章主要給大家介紹了關(guān)于Vue3封裝組件(帶回調(diào)事件)的相關(guān)資料,需要的朋友可以參考下
2023-06-06
UniApp在Vue3下使用setup語(yǔ)法糖創(chuàng)建和使用自定義組件的操作方法
通過(guò)defineProps定義屬性,defineEmits定義事件,computed創(chuàng)建計(jì)算屬性,emitEvent方法觸發(fā)事件,在其他組件中導(dǎo)入并使用這些自定義組件,傳遞屬性和監(jiān)聽事件,實(shí)現(xiàn)組件的復(fù)用性和可維護(hù)性,感興趣的朋友跟隨小編一起看看吧
2024-11-11