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