- 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判斷一下