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)絡(luò)參考無效問題，先這樣！
<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>注：關(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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了頁面tooltip組件的限制工具函數(shù)使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要介紹了如何在vue中使用video.js 播放m3u8格式的視頻，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下2021-02-02
Vue3使用Proxy構(gòu)建高效響應(yīng)式數(shù)據(jù)的示例代碼
在 Vue 3 中,Proxy 主要用于 攔截對象的基本操作,包括 屬性讀取（get）、修改（set）、刪除（deleteProperty） 等,本文給大家介紹了Vue3使用Proxy構(gòu)建高效響應(yīng)式數(shù)據(jù)的操作教程,需要的朋友可以參考下2025-03-03
Upload?上傳文件這個功能是我們在企業(yè)實際開發(fā)當中使用頻率是非常高的這樣一個文件上傳的功能,element?ui組件組也給我們提供了上傳的組件,本文給大家介紹el-upload?文件上傳組件的使用,感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了解決vue單頁面 回退頁面 keeplive 緩存問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue3中axios請求封裝、請求攔截與相應(yīng)攔截詳解
目前前端最流行的網(wǎng)絡(luò)請求庫還是axios,所以對axios的封裝很有必要,下面這篇文章主要給大家介紹了關(guān)于Vue3中axios請求封裝、請求攔截與相應(yīng)攔截的相關(guān)資料,需要的朋友可以參考下2023-05-05
Avue實現(xiàn)動態(tài)查詢與數(shù)據(jù)展示的示例代碼
Avue是一個基于Vue.js的前端框架,它是由阿里云開發(fā)的一款企業(yè)級UI組件庫,旨在提供一套全面、易用且高性能的界面解決方案本文介紹了Avue實現(xiàn)動態(tài)查詢與數(shù)據(jù)展示的示例,需要的朋友可以參考下2024-08-08
通常我們的項目會越做越大,頁面也會越來越多,隨之而來的是接口數(shù)量的增加,api統(tǒng)一管理,不管接口有多少,所有的接口都可以非常清晰,容易維護,下面這篇文章主要給大家介紹了關(guān)于axios二次封裝的詳細過程與跨域問題的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了封裝Vue Element的table表格組件的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-08-08
Vue3中的element-plus表格實現(xiàn)代碼
這篇文章主要介紹了Vue3中的element-plus表格實現(xiàn)代碼,用組件屬性實現(xiàn)跳轉(zhuǎn)路由,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2024-05-05