Vue自身並沒有實現樹形下拉框的組件，找了很多資料，最后在Github上找了個插件vue-treeselect，功能還是比較全的，模糊搜索、多選、延遲加載、異步搜索、排序，自定義、Vuex支持等等。這些功能在官網上都有詳細的介紹：
vue-treeselect官網： vue-treeselect
vue-treeselect github地址： vue-treeselect
下面只做個簡單的功能介紹，模糊搜索與樹形結構展示：
當然，首先是下載安裝插件：
npm install --save @riophae/vue-treeselect
安裝成功之后，就可以進行測試了，下面是我的測試vue:
<template>
<div>
<Card>
<tree-select
:options="options"
placeholder="請選擇分類..."
v-model="value"
/>
</Card>
<Card>
{{ value }}
</Card>
</div>
</template>
<script>
import { mapActions } from 'vuex'
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
name: 'CustomTreeSelect',
components: { TreeSelect },
data() {
return {
value: 0,
options: [],
}
},
methods: {
...mapActions([
'albumCategoryList'
]),
queryCategoryList () {
this.albumCategoryList({
parentId: 0,
all: 1
}).then((res) => {
console.log(res.fields)
if (res.status === 1) {
let result = []
const children = this.getTree(res.fields)
let obj = {}
obj.label = '頂級分類'
obj.id = 0
obj.children = children
result.push(obj)
this.options = result
} else {
this.$Notice.error({
title: '錯誤',
desc: res.msg
})
}
}).catch(error => {
this.$Notice.error({
title: '錯誤',
desc: '網絡連接錯誤'
})
console.log(error)
})
},
getTree (tree = []) {
let arr = [];
if (tree.length !== 0) {
tree.forEach(item => {
let obj = {};
obj.label = item.categoryName;
obj.id = item.id;
if(item.child === 1) {
obj.children = this.getTree(item.children);
}
arr.push(obj);
});
}
return arr
},
},
mounted () {
this.queryCategoryList()
}
}
</script>
<style scoped>
</style>
這個插件默認的數據結構為：
{ "id" : "", "label" : "", "children" : [] }
我們從數據庫查出來的數據肯定不是這個樣子的啦，所以需要在頁面中轉換一下數據結構，這個邏輯看一下代碼中的函數 getTree()。在提醒一下，如果當前分類下面沒有子分類的話，就不需要children這個屬性了。
上述運行成功之后，在界面上就可以看到具體的結構了：
默認情況是這樣的：
展開之后是這樣的：
模糊搜索之后是這樣的：
選中某個分類之后，與之綁定的data屬性就會得到分類的id值：
這樣一個簡單的下拉樹結構就出來了，更復雜的功能可以參考官網來寫，其中例子都很全面