使用iview遇到问题记录总结

Posted 2021-03-16 lb0121

1.iview设置日期不可用，设置开始开始时间早于结束时间

官网示例，设置今天之前不可选，但是不能识别this
disabledDate (date) {
    return date && date.valueOf() < Date.now() - 86400000;
}
绑定this，可设置定义好的变量
optionsEndTime: {
    disabledDate: (function (date) {
        return date < new Date(this.formValidate.startTime).getTime() + 60000
    }).bind(this)
}

 

2.列表查询时分页下边回到第一页

this.$refs[‘pagesChannel‘].currentPage = 1;
分页的ref="pagesChannel"

 

3.使用表单校验是，会出现新增或者修改不能通过校验的问题，可给输入框设置type属性

可参考 https://blog.csdn.net/ztx114/article/details/92806695

 

4.如果一个form组件中只有一个input组件，当这个input获得焦点时，按enter键会刷新页面，多个input则不会

解决这个问题可在元素中添加 @submit.native.prevent

vue里面类似的问题都可以尝试

<Form 
    @submit.native.prevent>
<Form>
@submit.prevent="function"还可设置方法
方法中返回false则阻止调教
[e-mail]()继续默认提交

 

5.表格数据跨页操作，可设置变量缓存已选中数据，通过选中事件@on-select，取消选中事件@on-select-cancel，全选事件@on-select-all@on-select-all-cancel对数据进行操作

和取消全选事件@on-select-all-cancel对已选数据进行处理，官方文档取消全选事件返回参数为已选数据，所以需要通过 this.$refs.selection.data 获取全选取消数据

forEach有时候会不执行，所以暂时都用for循环

@on-select-cancel="cancelChange"
@on-select="onChange"
@on-select-all="checkAllChange"
@on-select-all-cancel="cancelAllChange"

// 取消选择事件
cancelChange(selection,val) {
  for(let t=0;t<this.selectChangeList.length;t++){
    if(this.selectChangeList[t] === val.uuid){
      this.selectChangeList.splice(t,1)
    }
  }
  for(let x=0;x<this.selectLists.length;x++){
    if(this.selectLists[x].uuid === val.uuid){
      this.selectLists.splice(x,1)
    }
  }
},
//全选事件
checkAllChange(val){
  for(let t=0;t<val.length;t++){
    if(this.selectChangeList.indexOf(val[t].uuid) === -1){
      this.selectChangeList.push(val[t].uuid);
      this.selectLists.push(val[t])
    }
  }
},
//取消全选事件
cancelAllChange(val){
  let data = this.$refs.selection.data;
  for(let t=0;t<data.length;t++){
    for(let v=0;v<this.selectChangeList.length;v++){
      if(this.selectChangeList[v] === data[t].uuid){
        this.selectChangeList.splice(v,1)
      }
    }
  }
  for(let x=0;x<data.length;x++){
    for(let d=0;d<this.selectLists.length;d++){
      if( data[x].uuid === this.selectLists[d].uuid){
        this.selectLists.splice(d,1)
      }
    }
  }
},

 

6.跨页操作数据上一页已选数据反显，设置iview的 _checked 属性

for(let i=0;i<this.tableData.data.length;i++){
    for(let j=0;j<this.selectChangeList.length;j++){
        if(this.tableData.data[i].uuid === this.selectChangeList[j]){
             this.tableData.data[i][‘_checked‘] = true
         }
     }
}