快捷導(dǎo)航

vue用elementui寫form表單時,在label里添加空格操作

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

這篇文章主要介紹了vue用elementui寫form表單時,在label里添加空格操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

代碼：

 <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="請輸入密碼"
    autocomplete="off"
    show-password
   ></el-input>
   </el-form-item>

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

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

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

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

vue中的 $slot 獲取插槽的節(jié)點實例
今天小編就為大家分享一篇vue中的 $slot 獲取插槽的節(jié)點實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue中v-model指令與.sync修飾符的區(qū)別詳解
本文主要介紹了vue中v-model指令與.sync修飾符的區(qū)別詳解，詳細的介紹了兩個的用法和區(qū)別，感興趣的可以了解一下
2021-08-08
移動端滑動切換組件封裝 vue-swiper-router實例詳解
這篇文章主要介紹了移動端滑動切換組件封裝 vue-swiper-router實例詳解,需要的朋友可以參考下
2018-11-11
vue vantUI tab切換時 list組件不觸發(fā)load事件的問題及解決方法
這篇文章主要介紹了vue vantUI tab切換時 list組件不觸發(fā)load事件的解決辦法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2020-02-02
Vuex之理解state的用法實例
本篇文章主要介紹了Vuex之理解state的用法實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
Element-UI中Upload上傳文件前端緩存處理示例
這篇文章主要介紹了Element-UI中Upload上傳文件前端緩存處理示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02
vuejs2.0子組件改變父組件的數(shù)據(jù)實例
本篇文章主要介紹了vuejs2.0子組件改變父組件的數(shù)據(jù)實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
詳解Vue3如何加載動態(tài)菜單
這篇文章主要為大家詳細介紹了Vue3是如何實現(xiàn)加載動態(tài)菜單功能的，文中的示例代碼講解詳細，對我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下
2022-07-07
vue實現(xiàn)拖拽或點擊上傳圖片
這篇文章主要為大家詳細介紹了vue實現(xiàn)拖拽或點擊上傳圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
利用Vue2.x開發(fā)實現(xiàn)JSON樹的方法
這篇文章主要給大家介紹了關(guān)于利用Vue2.x開發(fā)實現(xiàn)JSON樹的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2018-01-01