Vue實現樹形下拉框

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

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