element-ui中el-cascader動態加載和默認值怎么使用

本文小編為大家詳細介紹“element-ui中el-cascader動態加載和默認值怎么使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“element-ui中el-cascader動態加載和默認值怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

首先el-cascader最常用的是顯示省市區，所有省市區三四千項一下子加載出來總會有個卡頓的過程，所以我一般用動態加載，這個element的文檔和例子很清楚了。

這是我代碼中的一部分，盡可能的去掉了多余的代碼

<el-cascader ref="areas" v-model="address.area_ids" 
:options="options" :props="props" separator="/" />

data() {
      return {
        options: [],
        address: {
          area: [],
          area_ids: [],
          value: '',
          lat: '',
          lng: ''
        },
        props: {
          lazy: true, //動態加載開關
          lazyLoad(node, resolve) { //動態加載函數
            const { level,value,label} = node;
            get("../city/get", {
              parentid: value
            }).then((res) => {
              if (res.state == 'success') {
                var data = res.data;
                data.map(item => {
                  item.leaf = item.child == "0" //leaf如果是true就結束了，意味著沒有下一級
                  return item;
                })
                resolve(data);
              } else {
                resolve([]);
              }
            })
          }
        }
      }
    },

正常選擇沒問題。一般剛開始的options默認的是第一級的數組

最頭疼的部分，在編輯表單時要顯示出來前面已經選擇過的項，也就是回顯默認值，首先保證v-mode的值是長度是3的數組（結合情況，不一定非要是3），一定保證[省,市,區]順序正確，我昨天大意寫錯了市的id，檢查了一天沒發現問題。

另外，既然要顯示默認值，肯定也要給el-cascader一個默認的options,要保證是這種結構

[
	{
	'value':'1',
	'label':'河南',
	'leaf':false,//不帶leaf，選項后面沒有向右的箭頭，下面的自行補充
	'children':[{
					'value':'11',
					'label':'鄭州',
					'children':[
						{
							'value':'111',
							'label':'中原區'
						},
						{
							'value':'112',
							'label':'二七區'
						}
					]
				},{
					'value':'12',
					'label':'洛陽'
				}]
	},
	{
	'value':'2',
	'label':'河北',
	}
]

應該很清晰了，就是保證所選路徑的上下級和平級數據完整，為什么要完整，因為還有下面一個問題。

在options處理完后，默認值應該就可以正常顯示了。

但是當再更換地區市，選了一下“鄭州”后發現，鄭州的子級重復了（選“河南”也一樣），這也好理解，說明是鄭州的子級又加載了一遍并且填充到下級的選項組里了，新加載的和默認的重復了。這畢竟不完美，做程序員慢慢有了強迫癥了，扒了扒element的源碼，問題很好解決，只是element官方沒有簡單明了的說出來。

在處理完options和v-model后，要處理選中項的加載狀態，否則還會重新加載一次。

//上面的代碼自行補充
		this.$nextTick(_=>{
              var node=this.$refs.areas.getCheckedNodes(); //獲取當前選中節點
              if(node&&node[0]&&node[0].pathNodes){//選中節點的所有父節點
                for(var i=0;i<node[0].pathNodes.length;i++){
                  node[0].pathNodes[i].loaded=true; //節點的加載狀態設為true，就不會再加載了
                }
              }
            })

讀到這里，這篇“element-ui中el-cascader動態加載和默認值怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。