console
var vm = new Vue({
el: '#app',
data: {
position: null,
selectArr: ['第1级-选项1'],
selectList: [[{
value: '第1级-选项1',
label: '第1级-选项1'
},
{
value: '第1级-选项2',
label: '第1级-选项2'
},
{
value: '第1级-选项3',
label: '第1级-选项3'
},
{
value: '第1级-选项4',
label: '第1级-选项4'
},
{
value: '第1级-选项5',
label: '第1级-选项5'
}]]
},
methods: {
addSelectList(index) {
return [{
value: '第' + (index + 2) + '级-选项1',
label: '第' + (index + 2) + '级-选项1'
},
{
value: '第' + (index + 2) + '级-选项2',
label: '第' + (index + 2) + '级-选项2'
},
{
value: '第' + (index + 2) + '级-选项3',
label: '第' + (index + 2) + '级-选项3'
},
{
value: '第' + (index + 2) + '级-选项4',
label: '第' + (index + 2) + '级-选项4'
},
{
value: '第' + (index + 2) + '级-选项5',
label: '第' + (index + 2) + '级-选项5'
}]
},
selected(e) {
var current = e.target.value;
var nextSelect = this.addSelectList(this.position);
this.selectList.splice(this.position + 1, this.selectList.length, nextSelect);
this.selectArr.splice(this.position + 1, this.selectArr.length);
},
}
})
<div id="app">
<select v-for="(arrItem,key) in selectList" v-model="selectArr[key]" @focus="position=key" @change="selected" :key="key" style="margin:10px;padding:10px">
<option v-for="item in arrItem" :value="item.value" :key="item.value">{{item.label}}</option>
</select>
<p>选中项: {{ selectArr }}</p>
</div>