el cascader 懶載入子級資料 可搜尋

2021-10-10 06:05:41 字數 1919 閱讀 6970

乙個級聯控制項的功能,既要能夠支援懶載入子級資料(因為資料量大),又要能夠支援搜尋功能(省得使用者往下滾動下拉框)

ref=

"regiondom"

key="bbigdd"

filterable

:before-filter

="filterregion"

@input.native

="searchregion"

@visible-change

="regionmenuchange"

v-model

="district"

@change

="handlechange"

:options

="dstoptions"

clearable

collapse-tags

:props

="districtprops"

placeholder

="請選擇地域,如北京市海淀區"

>

el-cascader

>

data部分

district:"",

dstoptions:

null

,

computed部分,設定cascader的props屬性

districtprops()

= node;

if(node.level ==0)

getcascader()

.then

((res)

=>))

;resolve

(nodes);}

});}

,};}

,

methods方法:

filterregion

(value)

,regionmenuchange

(boolean)},

searchindustry

(el)

else).

then

(res=>);

}})}

,1200)}

},handlechange

(value)

,//獲取聯動資料

async

getcascader

(type, pcode)

=await

getcascader()

;if(code ==0)

else

if(type ===

"industry"))

;}}else);

}},

el-cascader上的其他重要屬性說明

filterable設定了這個屬性為true時,el-cascader才可以搜尋(可獲取焦點供使用者輸入);

before-filter篩選之前的鉤子,引數為輸入的值,若返回 false 或者返回 promise 且被 reject,則停止篩選。因要搜尋出來要展示的是:可供展開和多選的下拉框,所以只能將其返回false,才可隱藏起它本來的下拉框。

@visible-change是為了使使用者重新開啟下拉框時取代上次搜尋結果而展示的是全部的內容;否則仍然展示的是上次的搜尋結果。

@input.native是為了獲取到搜尋關鍵字然後請求介面獲取返回結果;文件上並沒有這個方法,試了一下,還可行。

key這裡隨便給了乙個字串 否則會報錯 很重要

//@focus = "focushandle"

focushandle()

}

如有知道的夥伴,煩請賜教,非常感謝啊!

mysql懶載入 mybatis懶載入

1.概念 懶載入就是按需載入,我們需要什麼的時候再去進行什麼操作。而且先從單錶查詢,需要時再從關聯表去關聯查詢,能很大提高資料庫效能,因為查詢單錶要比關聯查詢多張表速度要快。在mybatis中,resultmap可以實現高階對映 使用association collection實現一對一及一對多對映...

路由懶載入與元件懶載入

一 為什麼要使用路由懶載入 為給客戶更好的客戶體驗,首屏元件載入速度更快一些,解決白屏問題。二 定義 懶載入簡單來說就是延遲載入或按需載入,即在需要的時候的時候進行載入。三 使用 常用的懶載入方式有兩種 即使用vue非同步元件 和 es中的import 1 不用懶載入,vue中路由 如下 impor...

路由懶載入和元件懶載入

為給客戶更好的客戶體驗,首屏元件載入速度更快一些,解決白屏問題。二 定義 懶載入簡單來說就是延遲載入或按需載入,即在需要的時候的時候進行載入。三 使用 常用的懶載入方式有兩種 即使用vue非同步元件和es中的import 1 未用懶載入,vue中路由 如下 import vue from vue i...