trigger warning

iview踩坑

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

需求：省市区的三级联动，并且有删除效果，执⾏删除时，后⾯的⼀项也需要删除；当改变省份的时候，市和区都要改变，当改变市的时候，县/

区也要改变。⽤到的就是iview下拉框的属性：删除clearable和clearSingleSelect()

js

使⽤起来也⽐较简单，就是在需要删除的那段代码上加上标识：ref，然后在执⾏事件时，使⽤下段代码即可：

this.$ingleSelect();

2、iview使⽤第三⽅⾃定义的iconfont图标

iview是⽀持引⼊第三⽅iconfont图标的，具体如何使⽤？

（1）将字体图表⽂件和css⽂件放⼊static⽂件夹下。（有时候需要在css⾥改⼀下font字体⽂件的路径）

（2）在需要引⼊的页⾯引⼊css⽂件。（⽐如：import'../static/'）

（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:'Thenamecannotbeempty',trigger:'blur'}

],

}

（4）事件中校验

handleSubmit(name){

this.$refs[name].validate((valid)=>{

if(valid){

this.$s('Success!');

}el{

this.$('Fail!');

}

})

},

handleRet(name){

his.$refs[name].retFields();

}

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

v-model="ypeId"

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

'ypeId':[

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

],

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

⾃定义校验

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

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

callback().也就是这⼀块

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

4、modal关闭问题

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

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

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

在验证失败的时候，也就是el⾥加上：

g=fal;

this.$nextTick(()=>{

g=true;

});

5、row-class-name的使⽤

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

methods:{

rowClassName(row,index){

if(index===1){

return'demo-table-info-row';

}elif(index===3){

return'demo-table-error-row';

}

return'';

}

}

这是最简单的使⽤。如果将表格封装成组件形式，然后改变多个⾏的样式。使⽤⽅法就不⼀样了。

1、⾸先在表格组件中，在组件的props中定义，type=Funtion

exportdefault{

name:'',

props:{

listData:{

default:[]

},

columns:{

default:[]

},

rowClassName:{

type:Function,

default(){

return''

}

}

},

2、在引⼊组件的页⾯，使⽤本地缓存获取点击的表格⾏的id

removeSessionStore('lectId');

tSessionStore('lectId',)

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

if(getSessionStore('lectId')){

letlectId=getSessionStore('lectId');

if(lectId){

Id=lectId;

}

}

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

mydefineRow(row,index){

if(==Id){

return'demo-table-info-row'

}elif(IdentityId==Id){

return'demo-table-info-row'

}

return''

},

注意：使⽤来进⾏⽐较，不能使⽤index索引。上⾯只改变⼀个。如果想改变多个，思路也是⼀样的。将点击的id放⼊到数组ids中，然后在

mydefineRow⽅法中，循环这个ids数组，然后判断

mydefineRow(row,index){

for(leti=0;i<;i++){

if(===Ids[i]){

return'demo-table-info-row'

}

}

return''

},

上⾯不管是改变⼀⾏，还是改变多⾏，搞定。

6、iview动态⽣成的menu导航，opennames不能⾃动展开的问题

最近有个需求就是要做管理后台的⾃动登录功能。当⽤户在登录⽹站时，勾选了⾃动登录按钮，当浏览⼀段时间后，关闭⽹页，下次再通过链接进

⼊时，⾃动展开打开的左侧导航。open-names和active-name都已经获取到。但依然不⾏，解决：

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

this.$nextTick(()=>{

this.$_Opened();

this.$_ActiveName();

});

特别需要注意的是：open-names的值是数组类型，active-name的值是字符串或数字类型。但是，open-names数组⾥⾯的元素的数据类型必

须和active-name的数据类型⼀致。否则能获得焦点，但是⽗级菜单并不会⾃动展开。

2019/10/23

在tab页⾥⾯嵌⼊lect下拉框，切换lect总是没消失，查了好久才发现问题，改个下⾯样式transition:all0a-in-out就⾏了

.ivu-tabs{

height:calc(100%-42px);

.ivu-lect-lection,.ivu-lect-arrow,.ivu-checkbox-inner,.-checkbox-inner:after,.ivu-input-arch{

transition:all0a-in-out

}

}

2020/4/14

提⽰message消息总是被遮罩层弹窗遮盖问题

iview的弹窗层级是共享的，所以⼀直有这个问题,添加⼀个customClass:zZindex

if(eType===""){

this.$message({message:this.$t('Eigenvalues'),type:'warning',customClass:'zZindex'});

return;

}

//zZindex写在全局样式⾥⾯

.zZindex{

z-index:9999999999!important;

}