VUE里如何修改element-ui的顯示層次與上下間隔
更新時間：2023年06月08日 10:51:03 作者：寧波阿成
這篇文章主要介紹了VUE里如何修改element-ui的顯示層次與上下間隔問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue里修改element-ui的顯示層次與上下間隔
審批意見沒有填寫的時候出現(xiàn)提示框跑到后面去了，同時頁面的提示信息上下與附件間隔太小
如出現(xiàn)上面的信息
跑到后面去了主要還是z-index問題，實際上this.$message的z-index為1010也不小了
但還是跑到后面去了，一般el-dialog 為2000開始，說明太下了
如下修改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="處理意見" prop="comment" :rules="[{ required: true, message: '請輸入處理意見', trigger: 'blur' }]">
? ? ? ? ? <el-input type="textarea" v-model="taskForm.comment" placeholder="請輸入處理意見" />
? ? ? ? </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>對于
兩個之間間隔問題，可以用樣式解決
解決如下
?.el-form-item {
? ? ? margin-bottom: 20px;
? }效果圖如下：
vue element-ui 項目bug處理：實時去掉中間、前、后的空格，長度限制
el-input長度限制
使用 maxlength 就可以，沒出現(xiàn)網(wǎng)絡參考無效問題，先這樣！
<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 實時去掉中間、前、后的空格
<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)過測試以上方式，貌似對 “隱藏的密碼框” 會失效
“隱藏的密碼框” 會失效的解決方式
界面代碼
<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="請輸入密碼"
: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="確認密碼" prop="confirmPassword" v-if="addEditDisabled.hide" label-width="110px" >
<el-input
:disabled="addEditDisabled.disable2"
v-model.trim="form.confirmPassword"
placeholder="請確認密碼"
: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="集團員工編號" prop="userGroupCode" label-width="110px">
<el-input
:disabled="addEditDisabled.disable2"
v-model.trim="form.userGroupCode"
placeholder="請輸入員工編號"
maxlength="11"
@keyup.native="trimLR('form', 'userGroupCode')"
/>
</el-form-item>
</el-col>
</el-row>注：關鍵代碼
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, "");
}
},總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
uni-app制作小程序實現(xiàn)左右菜單聯(lián)動效果
這篇文章主要介紹了uni-app制作小程序實現(xiàn)左右菜單聯(lián)動效果,實現(xiàn)步驟和思路都很簡單，今天通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11
本文介紹了Vue路由的配置方法,包括基礎路由、嵌套路由、動態(tài)路由的添加與刪除,以及如何通過router-link跳轉、push和replace方法導航,還講解了動態(tài)路由在登錄場景下的應用及路由守衛(wèi)的使用2025-10-10
本文主要介紹了Webpack和Vite的區(qū)別小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
antd-DatePicker組件獲取時間值,及相關設置方式
這篇文章主要介紹了antd-DatePicker組件獲取時間值,及相關設置方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
m3u8是一種常用的視頻流媒體格式,通常用于在Web上播放視頻,這篇文章主要給大家介紹了關于vue項目實現(xiàn)m3u8流媒體播放的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了layui實際項目使用過程中遇到的兼容性問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
解決vue更新路由router-view復用組件內容不刷新的問題
今天小編就為大家分享一篇解決vue更新路由router-view復用組件內容不刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了總結vue映射的方法與混入的使用過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue為什么v-for的優(yōu)先級比v-if高原理解析
這篇文章主要為大家介紹了vue為什么v-for的優(yōu)先級比v-if高原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
下面小編就為大家分享一篇VUEJS 2.0 子組件訪問/調用父組件的實例。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02