快捷導(dǎo)航

vue用elementui寫(xiě)form表單時(shí),在label里添加空格操作

更新時(shí)間：2020年08月13日 14:12:40 作者：asteriaV

這篇文章主要介紹了vue用elementui寫(xiě)form表單時(shí),在label里添加空格操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

要在密碼兩字中間添加空格，發(fā)現(xiàn)直接添加  是識(shí)別不了的，正確寫(xiě)法為：

代碼：

 <el-form-item label="密 碼:" :label-width="formLabelWidth" prop="password">
   <label slot="label">密&nbsp;&nbsp;&nbsp;&nbsp;碼:</label>
   <el-input
    type="password"
    v-model="FormData.password"
    placeholder="請(qǐng)輸入密碼"
    autocomplete="off"
    show-password
   ></el-input>
   </el-form-item>

補(bǔ)充知識(shí)：vue + elementUI 給input輸入框添加字體小圖標(biāo)

基于vue框架，使用element-ui組件庫(kù)寫(xiě)表單效果，需要添加字體小圖標(biāo)，效果如下：

1.只需要添加prefix-icon="iconfont icon-xxx"即可（頭部插入）

//例如
<el-input 
 prefix-icon="iconfont icon-sousuo" 
 v-model="searchTableInfo" 
 placeholder="請(qǐng)輸入姓名" 
 style="width:240px"
></el-input>

2.添加suffix-icon=“iconfont icon-xxx”（尾部添加）

//例如
<el-input 
 suffix-icon="iconfont icon-sousuo" 
 v-model="searchTableInfo" 
 placeholder="請(qǐng)輸入姓名" 
 style="width:240px"
></el-input>

以上這篇vue用elementui寫(xiě)form表單時(shí),在label里添加空格操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Tree-Shaking?機(jī)制快速掌握
這篇文章主要為大家介紹了Tree-Shaking?機(jī)制的快速掌握教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
VUE?Element修改el-input和el-select長(zhǎng)度的具體步驟
這篇文章主要給大家介紹了關(guān)于VUE?Element修改el-input和el-select長(zhǎng)度的具體步驟,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-12-12
Vue?element-ui中表格過(guò)長(zhǎng)內(nèi)容隱藏顯示的實(shí)現(xiàn)方式
在Vue項(xiàng)目中,使用ElementUI渲染表格數(shù)據(jù)時(shí),如果某一個(gè)列數(shù)值長(zhǎng)度超過(guò)列寬,會(huì)默認(rèn)換行,造成顯示不友好,下面這篇文章主要給大家介紹了關(guān)于Vue?element-ui中表格過(guò)長(zhǎng)內(nèi)容隱藏顯示的實(shí)現(xiàn)方式,需要的朋友可以參考下
2022-09-09
vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
Vue對(duì)象的組成和掛載方式詳解
這篇文章主要介紹了Vue對(duì)象的基本組成和Vue對(duì)象掛載的幾種方式,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-07-07
vue圖片加載與顯示默認(rèn)圖片實(shí)例代碼
這篇文章主要為大家詳細(xì)介紹了vue圖片加載與顯示默認(rèn)圖片的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
vue 實(shí)現(xiàn)滾動(dòng)到底部翻頁(yè)效果(pc端)
這篇文章主要介紹了pc端vue 滾動(dòng)到底部翻頁(yè)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-07-07
vuex實(shí)現(xiàn)購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)購(gòu)物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
Vue中$once的兩個(gè)實(shí)用小技巧分享
$once是一個(gè)函數(shù),可以為Vue組件實(shí)例綁定一個(gè)自定義事件,但該事件只能被觸發(fā)一次,觸發(fā)之后隨即被移除,下面這篇文章主要給大家介紹了關(guān)于Vue中$once的兩個(gè)實(shí)用小技巧,需要的朋友可以參考下
2022-04-04
vue3中element-plus表格搜索過(guò)濾數(shù)據(jù)
本文主要介紹了vue3中element-plus表格搜索過(guò)濾數(shù)據(jù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2025-03-03