以前沒寫過三層式下拉選單，目前是按照先前寫雙層式下拉選單的邏輯模仿而來的，
處理的方式是一次撈取整包資料再用computed處理成連動的選單，因此當資料越來越大包時一開始的載入就會很久；因為以前最多就雙層而以不至於會太大包。

想問是否有甚麼方法可以改善呢?還是我應該每一層選項change的時候才去從後端撈出下一個子層的資料呢，但不曉得這樣是不是好的寫法還沒試過。

此URL為三層下拉選單的程式 https://jsfiddle.net/5b2uLfp9/

以下為選單的資料表大概的樣子為folder->scan->host

 const folderdata1 = [
            { folderid: 27, foldername: 'A', scanid: 28, scanName: 'apple' ,hostid:1,hostname:'applepie'},
            { folderid: 4588, foldername: 'B', scanid: 4732, scanName: 'Black', hostid:2,hostname:'BlackCoffee'},
            { folderid: 4588, foldername: 'B', scanid: 4732, scanName: 'Black', hostid:8,hostname:'BlackMan'},
            { folderid: 4588, foldername: 'B', scanid: 4665, scanName: 'Blue' , hostid:3,hostname:'BlueBird'},
          	{ folderid: 4588, foldername: 'B', scanid: 4665, scanName: 'Blue' , hostid:4,hostname:'BlueSky'},
            { folderid: 4588, foldername: 'B', scanid: 4665, scanName: 'Blue' , hostid:5,hostname:'BlueTears'},
        ]

以下為主要computed的程式碼

data() {
    return {           
             input: {
                  folder: null,
                  scan: null,
                  host:null,
                    },
             folders: [],
           }
         },
created() {
    this.folders = folderdata1 //之後要接的選單資料
         },
computed: {
     parentList() {
              let obj = {
                  sort: [],
                  map: {}
                      }
            this.folders.forEach(({ folderid, foldername, scanid, scanName,hostid,hostname }, index) => {
                        if (!obj.map[foldername]) {
                            obj.sort.push(foldername)
                            // mapObj建立一個foldername 的屬性，值是 sort,map
                            obj.map[foldername] = {
                                sort: [],
                                map: {},
                            }
                        }
                        if(!obj.map[foldername].map[scanName]){
                        	obj.map[foldername].sort.push(scanName)
                        	obj.map[foldername].map[scanName] = { index, scanid,sort:[],map:{} }
                        }
                        obj.map[foldername].map[scanName].sort.push(hostname)
                        obj.map[foldername].map[scanName].map[hostname]={index,hostid,hostname}
                    })
                    return obj;
                },
       childrenList() {
               this.input.scan = null
               if (this.input.folder) {
                     return  this.parentList.map[this.input.folder]
               } else {
                     return []
                     }
                },
        grandsonList() {
                this.input.host = null
                if (this.input.scan) {
                     return this.childrenList.map[this.input.scan]
                } else {
                     return []
                    }
                },
          },