vue-treeselect是一個基于Vue.js的樹形下拉框插件。它可以方便地實現(xiàn)單選模式下的樹形數(shù)據(jù)選擇功能，可以應(yīng)用于省市縣三級聯(lián)動、組織架構(gòu)、商品分類等場景。

使用vue-treeselect實現(xiàn)單選的方式有兩種：一種是通過設(shè)置single和clearable屬性為true，從而讓它只允許選擇一項，同時可以在已選擇項旁邊顯示清空按鈕。另一種是通過設(shè)置maxSelection為1，強制限制只能選擇一項。

下面是一個例子，在這個例子中，我們將使用第一種方式來實現(xiàn)單選。

<template>
<div>
<treeselect
v-model="value"
:options="options"
placeholder="請選擇"
:single="true"
:clearable="true"
/>
</div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
export default {
name: 'MyComponent',
components: { Treeselect },
data () {
return {
value: null,
options: [
{
id: 1,
label: '一級菜單1',
children: [
{
id: 11,
label: '二級菜單1-1'
},
{
id: 12,
label: '二級菜單1-2'
}
]
},
{
id: 2,
label: '一級菜單2',
children: [
{
id: 21,
label: '二級菜單2-1'
},
{
id: 22,
label: '二級菜單2-2'
}
]
}
]
}
}
}
</script>

在這個例子中，我們首先import了vue-treeselect，在組件中注冊了Treeselect組件。在data函數(shù)中，定義了value變量作為已選擇項，同時定義了options變量作為可選擇項。options變量中有兩個一級菜單，每個一級菜單下面有兩個二級菜單。

在template中，我們使用Treeselect組件，并將value和options傳遞給了它。我們在Treeselect組件中設(shè)置了single和clearable屬性為true，從而讓它只允許選擇一項，同時可以在已選擇項旁邊顯示清空按鈕。我們也設(shè)置了placeholder屬性，當沒有選擇項時顯示該屬性的值。

在腳本中，我們將Treeselect組件registered為組件的一個局部組件，并導入Treeselect。接下來我們定義了value和options兩個變量。

當Treeselect中的值改變時，v-model指令會更新value變量。這意味著我們可以通過value變量來獲得用戶選擇的項。

通過使用vue-treeselect插件，我們可以輕松地實現(xiàn)單選模式下的樹形數(shù)據(jù)選擇功能，可以非常方便地應(yīng)用于各種場景。