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值：

這樣一個簡單的下拉樹結構就出來了，更復雜的功能可以參考官網來寫，其中例子都很全面