快捷導(dǎo)航

element-ui中el-cascader動(dòng)態(tài)加載和默認(rèn)值詳解

更新時(shí)間：2023年05月05日 10:20:06 作者：zepcjsj0801

vue+elementUI項(xiàng)目中el-cascader級(jí)聯(lián)選擇器使用頻率非常高,下面這篇文章主要給大家介紹了關(guān)于element-ui中el-cascader動(dòng)態(tài)加載和默認(rèn)值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

剛解決了這個(gè)問(wèn)題，趁熱趕快拿出來(lái)涼涼，明天早上起來(lái)估計(jì)會(huì)忘

下拉框的選擇和默認(rèn)值對(duì)于我來(lái)說(shuō)一直都是個(gè)讓人頭疼的事，倒不是有多么難，而是很繁瑣。

要保證有值，還要有顯示的文字。表單提交后，再回過(guò)頭編輯還要顯示出來(lái)選擇的項(xiàng)。

進(jìn)入正題吧，我看別人寫的文章也非常討厭巴拉巴拉一堆沒用的。

首先el-cascader最常用的是顯示省市區(qū)，所有省市區(qū)三四千項(xiàng)一下子加載出來(lái)總會(huì)有個(gè)卡頓的過(guò)程，所以我一般用動(dòng)態(tài)加載，這個(gè)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, //動(dòng)態(tài)加載開關(guān)
          lazyLoad(node, resolve) { //動(dòng)態(tài)加載函數(shù)
            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就結(jié)束了，意味著沒有下一級(jí)
                  return item;
                })
                resolve(data);
              } else {
                resolve([]);
              }
            })
          }
        }
      }
    },

正常選擇沒問(wèn)題。一般剛開始的options默認(rèn)的是第一級(jí)的數(shù)組

最頭疼的部分，在編輯表單時(shí)要顯示出來(lái)前面已經(jīng)選擇過(guò)的項(xiàng)，也就是回顯默認(rèn)值，首先保證v-mode的值是長(zhǎng)度是3的數(shù)組（結(jié)合情況，不一定非要是3），一定保證[省,市,區(qū)]順序正確，我昨天大意寫錯(cuò)了市的id，檢查了一天沒發(fā)現(xiàn)問(wèn)題。

另外，既然要顯示默認(rèn)值，肯定也要給el-cascader一個(gè)默認(rèn)的options,要保證是這種結(jié)構(gòu)

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

應(yīng)該很清晰了，就是保證所選路徑的上下級(jí)和平級(jí)數(shù)據(jù)完整，為什么要完整，因?yàn)檫€有下面一個(gè)問(wèn)題。

在options處理完后，默認(rèn)值應(yīng)該就可以正常顯示了。

但是當(dāng)再更換地區(qū)市，選了一下“鄭州”后發(fā)現(xiàn)，鄭州的子級(jí)重復(fù)了（選“河南”也一樣），這也好理解，說(shuō)明是鄭州的子級(jí)又加載了一遍并且填充到下級(jí)的選項(xiàng)組里了，新加載的和默認(rèn)的重復(fù)了。這畢竟不完美，做程序員慢慢有了強(qiáng)迫癥了，扒了扒element的源碼，問(wèn)題很好解決，只是element官方?jīng)]有簡(jiǎn)單明了的說(shuō)出來(lái)。

在處理完options和v-model后，要處理選中項(xiàng)的加載狀態(tài)，否則還會(huì)重新加載一次。

//上面的代碼自行補(bǔ)充
		this.$nextTick(_=>{
              var node=this.$refs.areas.getCheckedNodes(); //獲取當(dāng)前選中節(jié)點(diǎn)
              if(node&&node[0]&&node[0].pathNodes){//選中節(jié)點(diǎn)的所有父節(jié)點(diǎn)
                for(var i=0;i<node[0].pathNodes.length;i++){
                  node[0].pathNodes[i].loaded=true; //節(jié)點(diǎn)的加載狀態(tài)設(shè)為true，就不會(huì)再加載了
                }
              }
            })

至此大功告成

總結(jié)

到此這篇關(guān)于element-ui中el-cascader動(dòng)態(tài)加載和默認(rèn)值的文章就介紹到這了,更多相關(guān)el-cascader動(dòng)態(tài)加載和默認(rèn)值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: