VUE里如何修改element-ui的显示层次与上下间隔
作者：宁波阿成
这篇文章主要介绍了VUE里如何修改element-ui的显示层次与上下间隔问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue里修改element-ui的显示层次与上下间隔
审批意见没有填写的时候出现提示框跑到后面去了，同时页面的提示信息上下与附件间隔太小
如出现上面的信息
跑到后面去了主要还是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 就可以，没出现网络参考无效问题，先这样！
<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>经过测试以上方式，貌似对 “隐藏的密码框” 会失效
“隐藏的密码框” 会失效的解决方式
界面代码
<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, "");
}
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。