使用iview遇到问题记录总结

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则阻止调教
this.@refs.export.submit()继续默认提交

 

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
         }
     }
}

 

7.在iview js文件中不能使用notice、message等方法的解决方案

import { Message } from 'iview'

Message.info('hello');
Message.success('hello');
Message.warning('hello');
Message.error('hello');

 

8.js切换tab页：有时候处理完数据要自动跳转到某个 tab页面，但是不点击tab，需要用到tab组件的v-modal功能

//HTML部分
<Tabs value="query" @on-click="changeTab" v-model="curTab">
  <TabPane label="查询" class="query" name="query"></TabPane>
  <TabPane label="新增" class="summary" name="summary"></TabPane>
</Tabs>

//跨组件操作用watch监听变化，若同一页面可直接写在对应的方法中
watch:{
  summaryAdd(){
    this.curTab = 'query';
  }
},

 

9.分页当前页数大于第一页时（第一页可能是0或者1），切换每页显示数量会调两次接口

//当前接口页码从0开始
if (this.pageList.page === 0) {
   this.getData()
}

 

10.设置数据列表全选

//js实现列表全选代码命令，state为true则选中
this.$refs.selection.selectAll(state)
//表格关联属性
<Table ref="selection">

 

11.修改iview默认表单样式 (参考：https://www.pianshen.com/article/6015212629/)

<style scoped>
   .itemBox>>>.ivu-form-item-label{
    width 100px !important
  }
</style>