(1)input框加验证(限制只能输入数字)
<el-input v-model="input" οninput="value=value.replace(/[^0-9-/]/g,'')" placeholder="请输入内容"></el-input>
带小数的正数,正则放oninput属性里 οninput="value=value.replace(/^\.+|[^\d.]/g,'')"
输入正整数, 正则放oninput属性里 οninput="value=value.replace(/[^0-9]/g,'')"
输入整数, 正则放oninput属性里 οninput="value=value.replace(/[^-0-9]/g,'')" ,
保留数组 为几位小数
<el-input v-model="value" @keyup.native="value = oninput(value,2)"></el-input>
/**
* oninput 限制输入框小数点位数,多出的过滤掉
* @param Number {val}
* @param Number {limit}
* Created by preference on 2020/04/10
*/
oninput(val,limit = 0) {
val = val.replace(/[^\d.]/g, ""); //保留数字
val = val.replace(/^00/, "0."); //开头不能有两个0
val = val.replace(/^\./g, "0."); //开头为小数点转换为0.
val = val.replace(/\.{2,}/g, "."); //两个以上的小数点转换成一个
val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); //只保留一个小数点
/^0\d+/.test(val) ? val = val.slice(1) : ''; //两位以上数字开头不能为0
const str = '^(\\d+)\\.(\\d{' + limit + '}).*$'
const reg = new RegExp(str)
if (limit === 0) {
// 不需要小数点
val= val.replace(reg, '$1')
} else {
// 通过正则保留小数点后指定的位数
val= val.replace(reg, '$1.$2')
}
return val
},
(2)多表单验证
let data = this.$refs.ruleFrom.validate()
let data2 = this.$refs.ruleFrom2.validate()
let arr=[]
arr.push(data)
arr.push(data2)
Promise.all(arr).then((valids)=>{
if(valids.filter((el)=>!el).length==0){
完成
}
})
(3)改变elementUI 样式问题
::v-deep
(4)elementUi火狐浏览器时间选择器兼容问题
<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :append-to-body="false"> </el-date-picker>
加 :append-to-body="false"
::v-deep .el-data.table td div{
position:relative
}
(5)单独设置el-form-item 宽度
<el-from-item label="标题" label-width="130px">