1、iview三级联动，删除效果实现
需求：省市区的三级联动，并且有删除效果，执行删除时，后面的一项也需要删除；当改变省份的时候，市和区都要改变，当改变市的时候，县/区也要改变。用到的就是iview下拉框的属性：删除clearable和clearSingleSelect()
<template>
<div id="app">
<Form v-model="formItem">
<Row>
<Col span="5">
<FormItem label="省">
<Select v-model="formItem.province" style="width:200px" @on-change="changeProvince" clearable filterable>
<Option v-for="item in dataArea" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</FormItem>
</Col>
<Col span="5">
<FormItem label="市">
<Select v-model="formItem.city" style="width:200px" @on-change="changeCity" clearable filterable ref='selectEl'>
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</FormItem>
</Col>
<Col span="5">
<FormItem label="区/县">
<Select v-model="formItem.county" style="width:200px" clearable filterable ref='selectcounty'>
<Option v-for="item in districtList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</FormItem>
</Col>
</Row>
</Form>
</div>
</template>
js
<script>
import axios from 'axios';
export default {
name: 'App',
components: {
},
data(){
return{
dataArea:[],
formItem:{
province:'',
city:'',
county:'',
},
cityList:[],
districtList:[]
}
},
created(){
this.iniDate()
},
methods:{
//省市区初始化
iniDate() {
axios.get('../static/region.json').then(res => {
this.dataArea = res.data;
})
},
changeProvince: function (value) {
this.cityList=[];
this.districtList=[];
this.$refs.selectEl.clearSingleSelect();
this.$refs.selectcounty.clearSingleSelect();
let length = this.dataArea.length;
if (value) {
for (let i = 0; i < length; i++) {
if (value == this.dataArea[i].value) {
this.cityList = this.dataArea[i].children;
}
}
}
},
changeCity: function (value) {
this.districtList=[];
this.$refs.selectcounty.clearSingleSelect();
let length = this.cityList.length;
if (value) {
for (let i = 0; i < length; i++) {
if (value == this.cityList[i].value) {
this.districtList = this.cityList[i].children;
}
}
}
},
}
}
</script>
使用起来也比较简单，就是在需要删除的那段代码上加上标识：ref，然后在执行事件时，使用下段代码即可：
this.$refs.selectcounty.clearSingleSelect();
2、iview使用第三方自定义的iconfont图标
iview是支持引入第三方iconfont图标的，具体如何使用？
（1）将字体图表文件和css文件放入static文件夹下。（有时候需要在css里改一下font字体文件的路径）
（2）在需要引入的页面引入css文件。（比如：import '../static/style.css'）
（3）在需要使用字体图标的地方引入icon的class名即可。比如：（<Icon custom="icon-10" size="24" />）
3、iview的表单校验问题
iview的表单校验步骤：
（1）给 外层的Form 设置属性 :model='formValidate'；属性 :rules :'ruleValidate'; 属性ref='formValidate'
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
（2）在需要校验的 FormItem 设置属性 prop 指向对应字段即可 prop=“”。需要注意的是：formItem的prop属性值必须和下面的v-model字段对应。
<FormItem label="Name" prop="name">
<Input v-model="formValidate.name" placeholder="Enter your name"></Input>
</FormItem>
（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框的年龄问题
<template>
<Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
<FormItem label="年龄" prop="age">
<Input type="text" v-model="formCustom.age" number></Input>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formCustom')">提交</Button>
</FormItem>
</Form>
</template>
<script>
export default {
data() {
const validateAge = (rule, value, callback) => {
if (!value) {
return callback(new Error("年龄不能为空"));
} else if (!Number.isInteger(value)) {
callback(new Error("请填写数字"));
} else if (value < 18) {
callback(new Error("年龄必须大于18"));
} else {
callback();//必须加上。否则填写成功后会一直转圈，点击不成功
}
};
return {
formCustom: {
age: ""
},
ruleCustom: {
age: [{ validator: validateAge, trigger: "blur" }]
}
};
},
methods: {
handleSubmit(name) {
this.$refs[name].validate(valid => {
if (valid) {
this.$Message.success("提交成功!");
} else {
this.$Message.error("提交失败!");
}
});
}
}
};
</script>
写法并不复杂。value表示填写的值，callback()表示填写之后的回调返回值，rule表示这个对象。但我们在校验的时候，如果成功，必须加上callback().也就是这一块
否则，填写完成之后，会一直转圈，并不能校验成功。
4、modal关闭问题
需求：modal框需要做校验处理，如果校验成功则向后台提交并关闭modal；校验不成功则弹出提示，不关闭modal。
问题：使用modal的v-model来处理并不能达到预期效果，校验不成功依然会关闭modal
解决：1、使用slot自定义的按钮实现；2、给modal添加一个loading状态，通过这个状态来控制显示隐藏，不过这个状态也有一定的规范。
<template>
<div id="app">
<Button type="primary" @click="btn">确定</Button>
<Modal
v-model="modal1"
title="填写信息"
@on-ok="ok('form')"
@on-cancel="cancel"
:loading='loading'
>
<Form :model="form" ref="form" :rules="rule">
<FormItem label="年龄" :label-width="80" prop="formInput">
<Input v-model="form.formInput"/>
</FormItem>
</Form>
</Modal>
</div>
</template>
<script>
export default {
data() {
return {
modal1: false,
loading:true,//初始化时必须设置为true，否则第一次还是会关闭
form: {
formInput: ""
},
rule: {
formInput: [{ required: true, message: "不能为空", trigger: "blur" }]
}
};
},
methods: {
btn() {
this.modal1 = true;
},
ok(name) {
this.$refs[name].validate(valid => {
if (valid) {
this.loading = false;
this.modal1 = false;
} else {
this.loading = false;
this.$nextTick(() => {
this.loading = true;
});
}
});
},
cancel() {}
}
};
</script>
在验证失败的时候，也就是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属性，可以改变表格行的样式问题。用法如下：
<Table :row-class-name="rowClassName" :columns="columns1" :data="data1"></Table>
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
<Table stripe :columns="columns" :data="listData" :row-class-name="mydefineRow" ></Table>
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<this.selectIds.length;i++){
if(row.id===this.selectIds[i]){
return 'demo-table-info-row'
}
}
return ''
},
上面不管是改变一行，还是改变多行，搞定。
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;
}
