- 1.iview确认密码校验
- 2.iview重置表单不能用
- 3.校验表单不能用或者报错 "TypeError: Cannot read property 'validate' of undefined"
- 4.iview多选框复选框
- 5.iview的复选框与前后台交互问题
- 6.iview左边导航栏太长不能滚动
- 7.iview两层弹窗第二个一闪而过
- 8.iview表格按钮不同情况显示不一样
1.iview确认密码校验
这是一个重置密码的弹窗,iview3的弹窗关闭和校验会有冲突,我采用了自定义的写法。
<Modal v-model="modalPassword" :loading=true :mask-closable="false" @on-cancel="handleReset('resetPassword')"> <div slot="header"> <span>重置密码</span> </div> <Form :model="resetPassword" ref="resetPassword" :rules="ruleValidate" :label-width="120"> <FormItem label="新密码" prop="Firstpassword"> <Input v-model="resetPassword.Firstpassword"></Input> </FormItem> <FormItem label="确认密码" prop="Secondpassword"> <Input v-model="resetPassword.Secondpassword"></Input> </FormItem> </Form> <div slot="footer"> <Button @click="handleReset('resetPassword')">取消</Button> <Button type="primary" @click="passwordOk">确定重置</Button> </div> </Modal>
data() {
const pwdCheckValidate = (rule, value, callback) => {
let vm = this;
if (value == '') {
return callback(new Error('确认密码不能为空')); } else if (value != vm.resetPassword.Firstpassword) { return callback(new Error('两次密码不一致')); } else { callback(); } }; return { resetPassword:{}, ruleValidate:{ Firstpassword: [ { required: true, message: '新密码不能为空', trigger: 'blur' }, { type: 'string', pattern: /(?![0-9A-Z]+$)(?![0-9a-z]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/, message: '密码由8-20位大小写字母数字组成', trigger: 'blur' } ], Secondpassword: [ { required: true, trigger: 'blur', validator: pwdCheckValidate }, { type: 'string', pattern: /(?![0-9A-Z]+$)(?![0-9a-z]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/, message: '密码由8-20位大小写字母数字组成', trigger: 'blur' } ] } } }
注意:
- form表单的model加冒号,model与ref要保持一致
- prop是用于表单校验的,重置表单不加则清除不掉
2.iview重置表单不能用
handleReset(name) {
let vm = this;
if (this.$refs[name] !== undefined) {
this.$refs[name].resetFields();
}
}
加一个if判断就可以了
3.校验表单不能用或者报错 "TypeError: Cannot read property 'validate' of undefined"
原因
- 传参不对
- this.$refs[ruleForm].validate() 方式不识别。需要使用: this.$refs.ruleForm.validate();
4.iview多选框复选框
<FormItem label="菜单名称">
<CheckboxGroup v-model="addRole.list" v-for="(item,index) in menuArr" :key="index"> <Checkbox :label="item.menuName"></Checkbox> </CheckboxGroup> </FormItem>
注意
- list需要定义为数组
- lable加冒号
5.iview的复选框与前后台交互问题
静态页面
<checkbox-group v-model="pageItem.stu_batch">
<Checkbox label="1">综合院校</Checkbox> <Checkbox label="2">提前批招生</Checkbox> <Checkbox label="3">无批次招生</Checkbox> <Checkbox label="4">第一批次招生</Checkbox> <Checkbox label="5">第二批次招生A</Checkbox> <Checkbox label="6">第二批次招生B</Checkbox> <Checkbox label="7">第三批次招生A</Checkbox> <Checkbox label="8">第三批次招生B</Checkbox> </checkbox-group>
//渲染页面的数据
pageItem:{
stu_batch:[],//定义为数组(官方api为数组) }
与后台交互的对象(需要与前面pageItem进行赋值)
pageItemAddAndUpd: {
stu_batch:"",//因为我这边后台接收的为字符串 }
//这里赋值需要进行判断(因为如果是返回时空值没有填数据的话需要进行判断)
if(response.data.datalist[0].stu_batch==""||response.data.datalist[0].stu_batch==null){
this.pageItem.stu_batch = []; }else{ this.pageItem.stu_batch = JSON.parse(response.data.datalist[0].stu_batch); }
//这里是保存操作
this.pageItemAddAndUpd.stu_batch = JSON.stringify(this.pageItem.stu_batch)//需要将数组转化成字符串进行后台保存
6.iview左边导航栏太长不能滚动
父元素加个overflow: auto;就可以了
7.iview两层弹窗第二个一闪而过
setTimeout(_ => {
vm.$Modal.confirm({
title: '登录信息',
content: '数据库未发现该序列号'
});
}, 500);
第二个弹窗加个延迟
8.iview表格按钮不同情况显示不一样
h('Button', {
props: {
type: 'error',
size: 'small' }, style: { marginRight: '5px', display: (params.row.isValid === 0 && this.type === 'tableRole') ? "inline-block" : "none" }, on: { click: () => { this.addRole.roleId = params.row.roleId; this.dataDelete.push(params.row); this.modalDelete = true; } } }, '删除')
样式中display判断一下