1爹梁、iview三級聯(lián)動，刪除效果實(shí)現(xiàn)
需求：省市區(qū)的三級聯(lián)動提澎，并且有刪除效果姚垃，執(zhí)行刪除時(shí)，后面的一項(xiàng)也需要?jiǎng)h除盼忌；當(dāng)改變省份的時(shí)候积糯，市和區(qū)都要改變，當(dāng)改變市的時(shí)候谦纱，縣/區(qū)也要改變看成。用到的就是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="區(qū)/縣">
<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:{
//省市區(qū)初始化
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>
使用起來也比較簡單，就是在需要?jiǎng)h除的那段代碼上加上標(biāo)識：ref跨嘉，然后在執(zhí)行事件時(shí)川慌，使用下段代碼即可：
this.$refs.selectcounty.clearSingleSelect();
2、iview使用第三方自定義的iconfont圖標(biāo)
iview是支持引入第三方iconfont圖標(biāo)的，具體如何使用梦重？
（1）將字體圖表文件和css文件放入static文件夾下兑燥。（有時(shí)候需要在css里改一下font字體文件的路徑）
（2）在需要引入的頁面引入css文件。（比如：import '../static/style.css'）
（3）在需要使用字體圖標(biāo)的地方引入icon的class名即可琴拧。比如：（<Icon custom="icon-10" size="24" />）
3降瞳、iview的表單校驗(yàn)問題
iview的表單校驗(yàn)步驟：
（1）給 外層的Form 設(shè)置屬性 :model='formValidate'；屬性 :rules :'ruleValidate'; 屬性ref='formValidate'
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
（2）在需要校驗(yàn)的 FormItem 設(shè)置屬性 prop 指向?qū)?yīng)字段即可 prop=“”蚓胸。需要注意的是：formItem的prop屬性值必須和下面的v-model字段對應(yīng)挣饥。
<FormItem label="Name" prop="name">
<Input v-model="formValidate.name" placeholder="Enter your name"></Input>
</FormItem>
（3）在data里添加校驗(yàn)規(guī)則
ruleValidate: {
name: [
{ required: true, message: 'The name cannot be empty', trigger: 'blur' }
],
}
（4）事件中校驗(yàn)
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校驗(yàn)時(shí)于置，加引號茧吊，否則校驗(yàn)不通過
'plantVo.cropsTypeId': [
{ required: true, message: "請?zhí)顚懽魑锓N類", trigger: "change",type:'number' }
],
（2）在校驗(yàn)過程中，要時(shí)刻注意trigger的類型八毯，是click事件還是change事件搓侄，需要注意type的數(shù)據(jù)類型，是字符串還是數(shù)字類型话速。
自定義校驗(yàn)
自定義校驗(yàn)的規(guī)則和一般校驗(yàn)類似讶踪，不過也有區(qū)別，我們來驗(yàn)證一個(gè)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("請?zhí)顚憯?shù)字"));
} else if (value < 18) {
callback(new Error("年齡必須大于18"));
} else {
callback();//必須加上泊交。否則填寫成功后會一直轉(zhuǎn)圈乳讥，點(diǎn)擊不成功
}
};
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>
寫法并不復(fù)雜。value表示填寫的值廓俭，callback()表示填寫之后的回調(diào)返回值云石，rule表示這個(gè)對象。但我們在校驗(yàn)的時(shí)候研乒，如果成功汹忠，必須加上callback().也就是這一塊
否則，填寫完成之后雹熬，會一直轉(zhuǎn)圈宽菜，并不能校驗(yàn)成功。
4竿报、modal關(guān)閉問題
需求：modal框需要做校驗(yàn)處理铅乡，如果校驗(yàn)成功則向后臺提交并關(guān)閉modal；校驗(yàn)不成功則彈出提示烈菌，不關(guān)閉modal阵幸。
問題：使用modal的v-model來處理并不能達(dá)到預(yù)期效果花履，校驗(yàn)不成功依然會關(guān)閉modal
解決：1、使用slot自定義的按鈕實(shí)現(xiàn)挚赊；2臭挽、給modal添加一個(gè)loading狀態(tài)，通過這個(gè)狀態(tài)來控制顯示隱藏咬腕，不過這個(gè)狀態(tài)也有一定的規(guī)范。
<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,//初始化時(shí)必須設(shè)置為true葬荷，否則第一次還是會關(guān)閉
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>
在驗(yàn)證失敗的時(shí)候涨共，也就是else里加上：
this.loading = false;
this.$nextTick(() => {
this.loading = true;
});
給model加上loading狀態(tài)，初始化的時(shí)候宠漩，一定要設(shè)置loading為true举反，否則第一次還是會關(guān)閉“怯酰可參考：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 '';
}
}
這是最簡單的使用魁索。如果將表格封裝成組件形式，然后改變多個(gè)行的樣式盼铁。使用方法就不一樣了粗蔚。
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、在引入組件的頁面肤寝，使用本地緩存獲取點(diǎn)擊的表格行的id
removeSessionStore('selectId');
setSessionStore('selectId', params.row.id)
3当辐、在表格組件的初始化時(shí)，獲取這個(gè)id
if(getSessionStore('selectId')){
let selectId = getSessionStore('selectId');
if(selectId){
this.selectId=selectId;
}
}
4鲤看、在表格組件中缘揪，寫入相應(yīng)的事件
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來進(jìn)行比較，不能使用index索引刨摩。上面只改變一個(gè)寺晌。如果想改變多個(gè)，思路也是一樣的澡刹。將點(diǎn)擊的id放入到數(shù)組ids中呻征，然后在mydefineRow方法中，循環(huán)這個(gè)ids數(shù)組罢浇，然后判斷
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動態(tài)生成的menu導(dǎo)航赖临，opennames不能自動展開的問題
最近有個(gè)需求就是要做管理后臺的自動登錄功能。當(dāng)用戶在登錄網(wǎng)站時(shí)灾锯，勾選了自動登錄按鈕兢榨，當(dāng)瀏覽一段時(shí)間后，關(guān)閉網(wǎng)頁顺饮，下次再通過鏈接進(jìn)入時(shí)吵聪，自動展開打開的左側(cè)導(dǎo)航。open-names和active-name都已經(jīng)獲取到兼雄。但依然不行吟逝，解決：
獲取到兩個(gè)值后，在menu上加上ref='side_menu',在mounted()里還需要手動更新赦肋。
this.$nextTick(() => {
this.$refs.side_menu.updateOpened();
this.$refs.side_menu.updateActiveName();
});
特別需要注意的是：open-names的值是數(shù)組類型块攒，active-name的值是字符串或數(shù)字類型。但是佃乘，open-names數(shù)組里面的元素的數(shù)據(jù)類型必須和active-name的數(shù)據(jù)類型一致囱井。否則能獲得焦點(diǎn)，但是父級菜單并不會自動展開恕稠。
出處https://blog.csdn.net/weixin_38384967/article/details/83109703
2019/10/23
在tab頁里面嵌入select下拉框琅绅，切換select總是沒消失，查了好久才發(fā)現(xiàn)問題鹅巍，改個(gè)下面樣式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的彈窗層級是共享的千扶，所以一直有這個(gè)問題,添加一個(gè)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;
}
