Vue Cascader是一個非常強大的多級選擇器組件。它可以幫助我們創建各種多級選擇器，包括城市選擇、分類選擇等等。這種組件非常的靈活，因此我們可以針對特定的需求進行簡單的定制。

然而，在實際的應用中，我們有時需要用戶進行多選操作。Vue Cascader也提供了完美的多選功能。下面我們就來介紹一下如何使用Vue Cascader的多選功能。

<template><div><cascader :options="options" v-model="selected" :show-all-levels="false" :props="props" multiple></div></template><script>export default {
data() {
return {
selected: [],
props: {
value: 'id',
label: 'name',
children: 'cities'
},
options: [
{
id: 1,
name: '北京',
cities: [
{
id: 101,
name: '東城區'
},
{
id: 102,
name: '西城區'
}
]
},
{
id: 2,
name: '上海',
cities: [
{
id: 201,
name: '黃浦區'
},
{
id: 202,
name: '盧灣區'
}
]
}
]
}
}
};
</script>

上面的代碼中，我們可以看到在組件上加了一個multiple屬性。這個屬性是用來開啟多選功能的。我們還可以看到，選擇器的默認值是一個空數組，表示默認并沒有選擇任何選項。在數據中，我們還需要設置props屬性，來規定如何獲得選項的值和顯示文本。在選項上，我們通過設置children屬性來定義選項的下一級。

這里需要注意，多選后，我們得到的是一個選中的選項數組。如果需要把這個數組轉為字符串，我們需要用到JavaScript的數組方法。例如：

let selectedLabels = this.selected.map(selectedOption =>selectedOption.name).join(', ');

以上的代碼可以把選中的選項數組轉為字符串，并用逗號隔開每一個選項的文本。這是我們可以把它用來做頁面上的展示。