VUE里如何修改element-ui的顯示層次與上下間隔
更新時(shí)間：2023年06月08日 10:51:03 作者：寧波阿成
這篇文章主要介紹了VUE里如何修改element-ui的顯示層次與上下間隔問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue里修改element-ui的顯示層次與上下間隔
審批意見(jiàn)沒(méi)有填寫的時(shí)候出現(xiàn)提示框跑到后面去了，同時(shí)頁(yè)面的提示信息上下與附件間隔太小
如出現(xiàn)上面的信息
跑到后面去了主要還是z-index問(wèn)題，實(shí)際上this.$message的z-index為1010也不小了
但還是跑到后面去了，一般el-dialog 為2000開(kāi)始，說(shuō)明太下了
如下修改z-index="1000"就可以正常了
<!--審批正常流程-->
? ? <el-dialog :z-index="1000" :title="completeTitle" :visible.sync="completeOpen" :width="checkSendUser? '60%':'40%'" append-to-body>
? ? ? <el-form ref="taskForm" :model="taskForm" label-width="160px">
? ? ? ? <el-form-item v-if="checkSendUser" prop="targetKey">
? ? ? ? ? <el-row :gutter="20">
? ? ? ? ? ? <el-col :span="12" :xs="24">
? ? ? ? ? ? ? <h6>待選人員</h6>
? ? ? ? ? ? ? <el-table ref="singleTable" :data="userDataList" border style="width: 100%"
? ? ? ? ? ? ? ? @selection-change="handleSelectionChange">
? ? ? ? ? ? ? ? <el-table-column type="selection" width="50" align="center" ?/>
? ? ? ? ? ? ? ? <el-table-column label="用戶名" align="center" prop="realname" />
? ? ? ? ? ? ? ? <el-table-column label="部門" align="center" prop="orgCodeTxt" />
? ? ? ? ? ? ? </el-table>
? ? ? ? ? ? </el-col>
? ? ? ? ? ? <el-col :span="8" :xs="24">
? ? ? ? ? ? ? <h6>已選人員</h6>
? ? ? ? ? ? ? <el-tag v-for="tag in userData" :key="tag" closable @close="handleClose(tag)">
? ? ? ? ? ? ? ? {{tag.realname}} {{tag.orgCodeTxt}}
? ? ? ? ? ? ? </el-tag>
? ? ? ? ? ? </el-col>
? ? ? ? ? </el-row>
? ? ? ? </el-form-item>
? ? ? ? <el-form-item label="處理意見(jiàn)" prop="comment" :rules="[{ required: true, message: '請(qǐng)輸入處理意見(jiàn)', trigger: 'blur' }]">
? ? ? ? ? <el-input type="textarea" v-model="taskForm.comment" placeholder="請(qǐng)輸入處理意見(jiàn)" />
? ? ? ? </el-form-item>
? ? ? ? <el-form-item label="附件" ?prop="commentFileDto.fileurl">
? ? ? ? ? <j-upload v-model="taskForm.commentFileDto.fileurl" ? ></j-upload>
? ? ? ? </el-form-item>
? ? ? </el-form>
? ? ? <span slot="footer" class="dialog-footer">
? ? ? ? <el-button @click="completeOpen = false">取 消</el-button>
? ? ? ? <el-button type="primary" @click="taskComplete">確 定</el-button>
? ? ? </span>
? ? </el-dialog>對(duì)于
兩個(gè)之間間隔問(wèn)題，可以用樣式解決
解決如下
?.el-form-item {
? ? ? margin-bottom: 20px;
? }效果圖如下：
vue element-ui 項(xiàng)目bug處理：實(shí)時(shí)去掉中間、前、后的空格，長(zhǎng)度限制
el-input長(zhǎng)度限制
使用 maxlength 就可以，沒(méi)出現(xiàn)網(wǎng)絡(luò)參考無(wú)效問(wèn)題，先這樣！
<el-col :span="8">
<el-form-item label="合同編碼" prop="agreementCode" >
<el-input v-model="form.agreementCode" :disabled="addEditDisabled.editDisable" :maxlength="3" />
</el-form-item>
</el-col>el-input 實(shí)時(shí)去掉中間、前、后的空格
<el-col :span="8">
<el-form-item label="合同編碼" prop="agreementCode" >
<el-input v-model="form.agreementCode"
:disabled="addEditDisabled.editDisable"
:maxlength="10"
onkeyup="this.value=this.value.replace(/[, ]/g,'')"
/>
</el-form-item>
</el-col>經(jīng)過(guò)測(cè)試以上方式，貌似對(duì) “隱藏的密碼框” 會(huì)失效
“隱藏的密碼框” 會(huì)失效的解決方式
界面代碼
<el-row>
<el-col :span="8" v-if="addEditDisabled.hide">
<el-form-item label="密碼" prop="password" label-width="110px">
<el-input
:disabled="addEditDisabled.disable2"
v-model.trim="form.password"
auto-complete="new-password"
placeholder="請(qǐng)輸入密碼"
:type="pwdType"
@keyup.native="trimLR('form', 'password')"
>
<svg-icon
:icon-class="eyeType"
slot="suffix"
class="el-input__icon input-icon"
@mousedown="changeType()"
@mouseup="changeType()"
/>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="確認(rèn)密碼" prop="confirmPassword" v-if="addEditDisabled.hide" label-width="110px" >
<el-input
:disabled="addEditDisabled.disable2"
v-model.trim="form.confirmPassword"
placeholder="請(qǐng)確認(rèn)密碼"
:type="pwdType2"
@keyup.native="trimLR('form', 'confirmPassword')"
>
<svg-icon
:icon-class="eyeType2"
slot="suffix"
class="el-input__icon input-icon"
@mousedown="changeType2()"
@mouseup="changeType2()"
/>
</el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="集團(tuán)員工編號(hào)" prop="userGroupCode" label-width="110px">
<el-input
:disabled="addEditDisabled.disable2"
v-model.trim="form.userGroupCode"
placeholder="請(qǐng)輸入員工編號(hào)"
maxlength="11"
@keyup.native="trimLR('form', 'userGroupCode')"
/>
</el-form-item>
</el-col>
</el-row>注：關(guān)鍵代碼
v-model.trim="form.password"
@keyup.native="trimLR('form', 'password')"放在 methods{ } 里面的方法
trimLR(val, val1) {
if (this[val][val1]) {
this[val][val1] = this[val][val1].replace(/\s+/g, "");
}
},總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動(dòng)效果
這篇文章主要介紹了uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動(dòng)效果,實(shí)現(xiàn)步驟和思路都很簡(jiǎn)單，今天通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
本文介紹了Vue路由的配置方法,包括基礎(chǔ)路由、嵌套路由、動(dòng)態(tài)路由的添加與刪除,以及如何通過(guò)router-link跳轉(zhuǎn)、push和replace方法導(dǎo)航,還講解了動(dòng)態(tài)路由在登錄場(chǎng)景下的應(yīng)用及路由守衛(wèi)的使用2025-10-10
本文主要介紹了Webpack和Vite的區(qū)別小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
antd-DatePicker組件獲取時(shí)間值,及相關(guān)設(shè)置方式
這篇文章主要介紹了antd-DatePicker組件獲取時(shí)間值,及相關(guān)設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue項(xiàng)目實(shí)現(xiàn)m3u8流媒體播放詳細(xì)圖文教程
m3u8是一種常用的視頻流媒體格式,通常用于在Web上播放視頻,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)m3u8流媒體播放的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
layui實(shí)際項(xiàng)目使用過(guò)程中遇到的兼容性問(wèn)題及解決
這篇文章主要介紹了layui實(shí)際項(xiàng)目使用過(guò)程中遇到的兼容性問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
解決vue更新路由router-view復(fù)用組件內(nèi)容不刷新的問(wèn)題
今天小編就為大家分享一篇解決vue更新路由router-view復(fù)用組件內(nèi)容不刷新的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了總結(jié)vue映射的方法與混入的使用過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue為什么v-for的優(yōu)先級(jí)比v-if高原理解析
這篇文章主要為大家介紹了vue為什么v-for的優(yōu)先級(jí)比v-if高原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
VUEJS 2.0 子組件訪問(wèn)/調(diào)用父組件的實(shí)例
下面小編就為大家分享一篇VUEJS 2.0 子組件訪問(wèn)/調(diào)用父組件的實(shí)例。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02