Vue自定義級聯菜單是一種靈活且高效的方式來實現多級聯動下拉菜單。下面我們將通過代碼演示如何使用Vue自定義級聯菜單。

// 級聯菜單的數據源
const data = [
{
label: '選項 1',
value: '1',
children: [
{
label: '選項 1-1',
value: '1-1'
},
{
label: '選項 1-2',
value: '1-2',
children: [
{
label: '選項 1-2-1',
value: '1-2-1'
},
{
label: '選項 1-2-2',
value: '1-2-2'
}
]
}
]
},
{
label: '選項 2',
value: '2'
},
{
label: '選項 3',
value: '3',
children: [
{
label: '選項 3-1',
value: '3-1'
}
]
}
]
// 自定義級聯菜單組件
Vue.component('cascade-menu',{
data() {
return {
// 當前選擇的值
selectedValues: [],
// 當前級聯菜單的數據源
dataSource: data,
// 當前選中的菜單項
selectedItem: {}
}
},
methods: {
// 切換級聯菜單
onSelect(item, index) {
this.selectedItem = item
this.selectedValues.splice(index + 1, this.selectedValues.length - 1, item.value)
if (item.children) {
this.dataSource = item.children
} else {
this.dataSource = data
}
},
// 觸發選中事件
onSubmit() {
this.$emit('onSubmit', this.selectedValues)
}
},
template: `
<div>
<div v-for="(item, index) in selectedValues" :key="index" style="display:inline-block;margin-right:20px;">
{{ item }}
</div>
<button @click="onSubmit">提交</button>
<ul>
<li v-for="item in dataSource" :key="item.value" @click="onSelect(item, selectedValues.length - 1)">{{ item.label }}</li>
</ul>
</div>
`
})
// 使用自定義級聯菜單組件
new Vue({
el: '#app',
methods: {
onSubmit(selectedValues) {
alert(selectedValues)
}
},
template: `
<cascade-menu @onSubmit="onSubmit"></cascade-menu>
`
})

以上代碼實現了一個簡單的級聯菜單，當點擊菜單項時，會觸發onSelect方法，切換下一級菜單的數據源。當點擊提交按鈕時，會觸發onSubmit方法，并將當前選中的值作為參數傳遞給父組件。