iview開發中遇到的問題匯總

目錄

• 1.input無法監聽enter事件
• 2.iview重置表單不能用
• 3.校驗表單不能用或者報錯 "TypeError: Cannot read property 'validate' of undefined"
• 4.iview多選框復選框
• 5.iview的復選框與前后台交互問題
• 6.iview左邊導航欄太長不能滾動
• 7.iview兩層彈窗第二個一閃而過
• 8.iview表格按鈕不同情況顯示不一樣
• 9.button的disable用法
• 10.持續更新中

項目是基於vue+iview+typescript，iview和typescript都是首次在項目中使用，特把遇到的問題總結匯總以備查看。

1.input無法監聽enter事件

<input @keydown.enter='getPage()'></input> 

這樣寫enter事件無效
使用.native修飾，就可以監聽到enter事件了

<input @keydown.native.enter='getPage()'></input> 

這就是在某個組件
的根元素監聽一個原生事件 可以使用 .native 修飾 v-on

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

9.button的disable用法

<button :disable='isDisable()'>
//直接省略()，會有報錯提示

10.持續更新中