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.持续更新中