iview踩坑

1、iview三级联动，删除效果实现

需求：省市区的三级联动，并且有删除效果，执行删除时，后面的一项也需要删除；当改变省份的时候，市和区都要改变，当改变市的时候，县/区也要改变。用到的就是iview下拉框的属性：删除clearable和clearSingleSelect()

js

image.png

使用起来也比较简单，就是在需要删除的那段代码上加上标识：ref，然后在执行事件时，使用下段代码即可：
 this.$refs.selectcounty.clearSingleSelect();

2、iview使用第三方自定义的iconfont图标

iview是支持引入第三方iconfont图标的，具体如何使用？

（1）将字体图表文件和css文件放入static文件夹下。（有时候需要在css里改一下font字体文件的路径）

（2）在需要引入的页面引入css文件。（比如：import '../static/style.css'）

（3）在需要使用字体图标的地方引入icon的class名即可。比如：（）

3、iview的表单校验问题

iview的表单校验步骤：

（1）给 外层的Form 设置属性 :model='formValidate'；属性 :rules :'ruleValidate'; 属性ref='formValidate'

（2）在需要校验的 FormItem 设置属性 prop 指向对应字段即可 prop=“”。需要注意的是：formItem的prop属性值必须和下面的v-model字段对应。

（3）在data里添加校验规则

ruleValidate: {
     name: [
           { required: true, message: 'The name cannot be empty', trigger: 'blur' }
          ],
}

（4）事件中校验

handleSubmit (name) {
      this.$refs[name].validate((valid) => {
         if (valid) {
             this.$Message.success('Success!');
         } else {
              this.$Message.error('Fail!');
         }
        })
},
handleReset (name) {
      his.$refs[name].resetFields();
}

注意：（1）如果v-model并不是像上面那样，只是单字段的，是两层对象的，类似这样：

v-model="formItem.plantVo.cropsTypeId"

那么formItem的prop属性也要写成：prop='plantVo.cropsTypeId'，并且在data校验时，加引号，否则校验不通过

'plantVo.cropsTypeId': [
     { required: true, message: "请填写作物种类", trigger: "change",type:'number' }
],

（2）在校验过程中，要时刻注意trigger的类型，是click事件还是change事件，需要注意type的数据类型，是字符串还是数字类型。

自定义校验

自定义校验的规则和一般校验类似，不过也有区别，我们来验证一个input框的年龄问题

写法并不复杂。value表示填写的值，callback()表示填写之后的回调返回值，rule表示这个对象。但我们在校验的时候，如果成功，必须加上callback().也就是这一块

image.png

否则，填写完成之后，会一直转圈，并不能校验成功。

image.png

4、modal关闭问题

需求：modal框需要做校验处理，如果校验成功则向后台提交并关闭modal；校验不成功则弹出提示，不关闭modal。

问题：使用modal的v-model来处理并不能达到预期效果，校验不成功依然会关闭modal

解决：1、使用slot自定义的按钮实现；2、给modal添加一个loading状态，通过这个状态来控制显示隐藏，不过这个状态也有一定的规范。

在验证失败的时候，也就是else里加上：

this.loading = false;
           this.$nextTick(() => {
            this.loading = true;
          });

给model加上loading状态，初始化的时候，一定要设置loading为true，否则第一次还是会关闭。可参考：https://github.com/iview/iview/issues/597

5、row-class-name的使用

iview的表格提供了row-class-name属性，可以改变表格行的样式问题。用法如下：

 methods: {
            rowClassName (row, index) {
                if (index === 1) {
                    return 'demo-table-info-row';
                } else if (index === 3) {
                    return 'demo-table-error-row';
                }
                return '';
            }
        }

这是最简单的使用。如果将表格封装成组件形式，然后改变多个行的样式。使用方法就不一样了。
1、首先在表格组件中，在组件的props中定义，type=Funtion

 

export default {
        name: '',
        props: {
            listData: {
                default: []
            },
            columns: {
                default: []
            },
            rowClassName:{
                type:Function,
                default(){
                    return ''
      }
   }
},

2、在引入组件的页面，使用本地缓存获取点击的表格行的id

removeSessionStore('selectId');
setSessionStore('selectId', params.row.id)

3、在表格组件的初始化时，获取这个id

if(getSessionStore('selectId')){
    let selectId = getSessionStore('selectId');
    if(selectId){
         this.selectId=selectId;
    }
}

4、在表格组件中，写入相应的事件

mydefineRow(row,index){
 
    if(row.id==this.selectId){
      return 'demo-table-info-row'
    }else if (row.farmerIdentityId==this.selectId){
      return 'demo-table-info-row'
    }
     return ''
},

注意：使用row.id来进行比较，不能使用index索引。上面只改变一个。如果想改变多个，思路也是一样的。将点击的id放入到数组ids中，然后在mydefineRow方法中，循环这个ids数组，然后判断

mydefineRow(row,index){
                
for(let i = 0;i

上面不管是改变一行，还是改变多行，搞定。
6、iview动态生成的menu导航，opennames不能自动展开的问题
最近有个需求就是要做管理后台的自动登录功能。当用户在登录网站时，勾选了自动登录按钮，当浏览一段时间后，关闭网页，下次再通过链接进入时，自动展开打开的左侧导航。open-names和active-name都已经获取到。但依然不行，解决：

获取到两个值后，在menu上加上ref='side_menu',在mounted()里还需要手动更新。

this.$nextTick(() => {
    this.$refs.side_menu.updateOpened();
    this.$refs.side_menu.updateActiveName();
});

特别需要注意的是：open-names的值是数组类型，active-name的值是字符串或数字类型。但是，open-names数组里面的元素的数据类型必须和active-name的数据类型一致。否则能获得焦点，但是父级菜单并不会自动展开。

出处https://blog.csdn.net/weixin_38384967/article/details/83109703

2019/10/23
在tab页里面嵌入select下拉框，切换select总是没消失，查了好久才发现问题，改个下面样式transition: all 0s ease-in-out就行了

.ivu-tabs{
      height:calc(100% - 42px);
      .ivu-select-selection,.ivu-select-arrow,.ivu-checkbox-inner,.ivu-checkbox-checked .ivu-checkbox-inner:after,.ivu-input-search{
        transition: all 0s ease-in-out
      }
    }

2020/4/14
提示message消息总是被遮罩层弹窗遮盖问题
iview的弹窗层级是共享的，所以一直有这个问题,添加一个customClass:zZindex

 if(this.formItem.featureType===""){
        this.$message({message: this.$t('models.params.tip.selectEigenvalues'),type: 'warning',customClass: 'zZindex'});
        return;
      }

//zZindex写在全局样式里面
.zZindex{
  z-index:9999999999!important;
}