目录
- 1. Elementui蓝色阴影边框相关问题的解决方案(el-upload 上传文件,去掉默认动画效果)
- 2. Element循环表单验证
- 3. Form下面只有一个 input 时回车键刷新页面
- 4. type="number"去除输入框聚焦时的上下箭头
- 4.el-input输入框使用oninput或onkeyup后,v-model双向绑定失效问题
- 5.el-input当type='number'时,输入小数,获取的数据为String类型
- 6.el-input当type='number'时,会存在上下箭头,需要清除
- 7.使用el-select 不能继承父元素的宽度
- 8.element走马灯 autoplay='false' 取消自动播放 失败
- 9.DropDown组件使用时,子选项无法绑定事件的处理
- 10.Vue键盘回车事件
- 11.form 下面只有一个 input 时回车键刷新页面
- 12.表格固定列最后一行显示不全
- 13.气泡确认框文档里的confirm事件不生效
- 14.只校验表单其中一个字段
- 15.弹窗重新打开时表单上次的校验信息未清除
- 16.表头与内容错位
- 17.表格跨分页多选
- 18.隐藏滚动条
1. Elementui蓝色阴影边框相关问题的解决方案(el-upload 上传文件,去掉默认动画效果)
-
1.Tabs标签页出现蓝色阴影边框解决方案
.el-tabs__item:focus.is-active.is-focus:not(:active) { -webkit-box-shadow: none !important; box-shadow: none !important; } .el-tabs__item,.el-tabs__item:focus,.el-tabs__item:focus-visible{ outline: transparent auto 0px !important; }
-
2.el-button-radio出现蓝色阴影边框解决方案
.el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) { -webkit-box-shadow: none !important; box-shadow: none !important; } .el-radio-button,.el-radio-button:focus,.el-radio-button:focus-visible{ outline: transparent auto 0px !important; }
-
3.el-dropdown 下拉菜单出现蓝色阴影边框解决方案
.el-dropdown-link,.el-dropdown-link:focus,.el-dropdown-link:focus-visible { outline: transparent auto 0px !important; }
-
4.el-upload 上传文件,去掉默认动画效果。
.el-upload-list__item{ transition:none !important; -webkit-transition:nonne !important; } .el-upload-list__item-name{ transition:none !important; -webkit-transition:nonne !important; }
2. Element循环表单验证
-
1.表单格式
如果form表单里面的数据存在数组循环,那么我们又通过rules验证,那么就需要循环表单(如下)
<template> <div> <el-form ref='formCase' label-width="150px" :model="fromList" :rules="fromeRules"> <div v-for="(itemList,index) in fromList.valueArray" :key="index"> <!-- :prop="`valueArray[${index}][value1]`" --> <el-form-item label="测试一" :prop="`valueArray.${index}.value1`" :rules="fromeRules.adName"> <el-input v-model="itemList.value1" :placeholder="测试一"></el-input> </el-form-item> <div> </el-form> <button @click='clickBtn'></button> </div> </template> <script> export default { data() { const customRules= (rule, value, callback) => { if (!value || value.length == 0 || value=='') { //可以判断校验是否显示 this.isCustomRulesError= true callback(new Error(rule.message)) } else { //可以判断校验是否显示 this.isCustomRulesError= false callback() } } return { fromList:{ valueArray:[ { value1:'xxx' }, { value1:'xxx' }, ] }, fromeRules:{ adName: { required: true, message: '此项不能为空', trigger: 'blur' }, customRules: { required: true, message: '此项不能为空', trigger: 'change', validator: customRules } }, isCustomRulesError:false } }, methods:{ clickBtn() { this.$refs['formCase'].validate((valid) => { }) } } } </script>
-
2.首先我们需要循环数组,实现表单循环
<div v-for="(itemList,index) in fromList.valueArray" :key="index"> <!-- :prop="`valueArray[${index}][value1]`" --> <el-form-item label="测试一" :prop="`valueArray.${index}.value1`" :rules="fromeRules.adName"> <el-input v-model="itemList.value1" :placeholder="测试一"></el-input> </el-form-item> <div>
-
3.然后我们需要在
prop
时使用数组名称+index+具体参数
,同时rules
规则需要单独配置,接着v-model
需要双向绑定对应的值 -
4.最后,valueArray这个最好是一开始就有一组默认为空的数组,否则双向绑定、验证会失败,如果需要动态新增可以使用
this.fromList.valueArray.push(this.$options.data.call(this).fromList.valueArray[0])
fromList:{ valueArray:[ { value1:'xxx',//默认的 }, ] },
3. Form下面只有一个 input 时回车键刷新页面
需要使用`@keyup.enter.native`
<el-input v-model="itemList.value1" :placeholder="测试一" @keyup.enter.native="enterInput"></el-input>
4. type="number"去除输入框聚焦时的上下箭头
<template>
<div>
<el-input v-model="itemList.value1" type="number" :placeholder="测试一" class='clear-number-input'></el-input>
</div>
</template>
<style>
/* 设置全局 */
.clear-number-input.el-input::-webkit-outer-spin-button,
.clear-number-input.el-input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none !important;
}
.clear-number-input.el-input input[type="number"]::-webkit-outer-spin-button,
.clear-number-input.el-input input[type="number"]::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none !important;
}
.clear-number-input.el-input {
-moz-appearance: textfield;
}
.clear-number-input.el-input input[type="number"] {
-moz-appearance: textfield;
}
</style>
4.el-input输入框使用oninput或onkeyup后,v-model双向绑定失效问题
- 原因:当使用oninput或者onkeyup验证输入的内容,比如:验证数字时,输入框立即输入字母,这时输入框会清空,同时v-model双向绑定失效问题
- 解决办法:可以用blur手动给绑定的值赋值。
<el-input
v-model="form.price"
clearable
placeholder="请输入价格"
onkeyup="value=value.replace(/[^0-9]/g,'')"
@blur="form.price = $event.target.value"
></el-input>
5.el-input当type='number’时,输入小数,获取的数据为String类型
- 解决办法 v-model.number
<el-input
v-model.number="form.price"
type='number'
clearable
placeholder="请输入价格"
></el-input>
6.el-input当type='number’时,会存在上下箭头,需要清除
- 解决办法:设置 -webkit-inner-spin-button->-webkit-appearance: none !important;
input[type="number"]::-webkit-outer-spin-button,::-webkit-inner-spin-button{
margin: 0;
-webkit-appearance: none !important;
}
.el-input,.el-input input[type="number"] {
-moz-appearance: textfield;
}
7.使用el-select 不能继承父元素的宽度
- 原因:el-select 本身是 inline-block
- 解决办法:给el-select 元素加行内 控制其宽度。
<el-form-item label="选择"style="width:300px">
<el-select v-model="from.select" placeholder="请选择" multiple style="width:100%">
</el-select>
</el-form-item>
8.element走马灯 autoplay=‘false’ 取消自动播放 失败
- 解决办法:interval设置为0,也可以取消自动播放
<el-carousel interval='0' height="150px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
9.DropDown组件使用时,子选项无法绑定事件的处理
- 解决办法:使用DropDown组件绑定点击事件时,需要加 .native 才能绑定成功,即 @click.native=‘fun’
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native='fun(1)'>黄金糕</el-dropdown-item>
<el-dropdown-item @click.native='fun(2)'>狮子头</el-dropdown-item>
<el-dropdown-item @click.native='fun(3)'>螺蛳粉</el-dropdown-item>
</el-dropdown-menu>
10.Vue键盘回车事件
- 原因:element-ui把input进行了封装,原事件就不起作用了
- 解决办法:使用@keyup.enter就可以
<input v-model="form.name" placehoder="昵称" @keyup.enter="submit">
<el-input v-model="form.name" placehoder="昵称" @keyup.enter.native="submit"></el-input>
11.form 下面只有一个 input 时回车键刷新页面
- 原因:触发了表单默认的提交行为
- 解决办法:el-form 加上@submit.native.prevent就行了
<el-form inline @submit.native.prevent>
<el-form-item label="昵称">
<el-input
v-model="from.name"
:placeholder="输入"
clearable
@keyup.enter.native="enterInput"
/>
</el-form-item>
</el-form>
12.表格固定列最后一行显示不全
- 原因:这种情况有时在宽度刚好处于临界值状态时会出现。因为固定列是独立于表格body动态计算高度的,出现了固定列高度小于表格高度所以造成最后一行被遮挡。
.el-table__fixed-right {
height: 100% !important;
}
13.气泡确认框文档里的confirm事件不生效
- 原因:某些版本使用的是onConfirm、onCancel
- 解决办法:将confirm改为onConfirm
<el-popover @onConfirm="">
</el-popover>
14.只校验表单其中一个字段
this.$refs['form'].validateField('name', valid => {
if (valid) {
//提交
}
})
15.弹窗重新打开时表单上次的校验信息未清除
- 解决办法:重置表单
<el-dialog @close="onClose">
<el-form ref="form">
</el-form>
</el-dialog>
// 弹窗关闭时重置表单
onClose() {
this.$refs['form'].resetFields()
}
16.表头与内容错位
// 全局设置
.el-table--scrollable-y .el-table__body-wrapper {
overflow-y: overlay !important;
}
17.表格跨分页多选
- 解决办法:只需加上row-key和reserve-selection即可
<el-table row-key="id">
<el-table-column type="selection" reserve-selection></el-table-column>
</el-table>
18.隐藏滚动条
<div ckass="scrollView no_scrollbar ">
</div>
<style lang="scss">
.scrollView {
width: 100vw;
height: 100vh;
overflow: auto;
}
/* 隐藏滚动条 */
.no_scrollbar {
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
&::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
}
</style>