vue基于element-ui的Select选择器实现的动态多级联动下拉选择
var vm = new Vue({
el: '#app',
data: {
position: null,
selectArr: [],
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(item) {
// (item); // item为当前选中项的对象
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);
},
}
})