vue+iview多條聯動，for迴圈data是函式
阿新 • • 發佈：2020-06-27
問題：多條for迴圈出的資料二級聯動
for迴圈出多條資料，每條資料都有一個二級聯動，每次下拉一級聯動，二級的選項都是變化的。
思考
剛開始一直想不出如何實現二級聯動下拉的資料動態變化，因為之前一直都是v-for="item in data"，認為data必須寫死，後來嘗試著讓data是一個函式，結果成功了。
for迴圈的data可以是函式
這裡順便說一下v-for="item in data"，data是陣列引數和函式的區別：函式需要加（），否則無效
#附上完整程式碼：
<template>
<div>
<ul class="box">
<li v-for="(item1,index1) in args" style="min-height: 50px;"><span style="float: left;">第{{index1+1}}條聯動：</span>
<span class="b">
<i-select v-model="item1.type">
<i-option v-for="item3 in paramTypeName" :value="item3.type" :key="item3.id">{{ item3.name }}</i-option>
</i-select>
</span>
<span class="b">
<i-select v-model="item1.secondtype"><i-option v-for="item4 in selectChange(item1.type)" :value="item4.type" :key="item4.id">{{ item4.name }}</i-option>
</i-select>
</span>
</li>
</ul>
</div>
</template>
<script>
export default {
components: {
//MultiSelect,
},
data() {
let vm = this; return {paramTypeName: [{
"id": 1,
"type": "1", //一級聯動型別
"name": "IP",
"subType": [{
"id": 1,
"type": "1", //二級聯動型別
"name": "IP1"
},
{
"id": 2,
"type": "2",
"name": "IP2"
}
]
},
{
"id": 2,
"type": "2",
"name": "數字",
"subType": [{
"id": 1,
"type": "1",
"name": "數字1"
},
{
"id": 2,
"type": "2",
"name": "數字2"
},
{
"id": 3,
"type": "3",
"name": "數字3"
},
{
"id": 4,
"type": "4",
"name": "數字4"
}
]
},
{
"id": 3,
"type": "3",
"name": "銀行卡",
"subType": [{
"id": 1,
"type": "1",
"name": "銀行卡1"
},
{
"id": 2,
"type": "2",
"name": "銀行卡2"
}
]
}
],
args: [{
"name": "name",
"type": "1", //一級聯動值
"secondtype": "1", //二級聯動值
},
{
"name": "pwd",
"type": "2",
"secondtype": "2",
}
],
typeSubs: {}
}
},
methods: {
selectChange(val) {
let vm = this;
let index = parseInt(val) - 1;
return vm.paramTypeName[index].subType;
},
}, //鉤子函式，初始化頁面使用
mounted() {},
}
</script>
<style scoped lang="less">
.box {
width: 600px;
.b {
width: 40%;
float: left;
margin-right: 10px;
}
li {
list-style: none;
}
}
</style>