2021-05-28 element Plus組件Cascader 級聯選擇器

初次使用級聯選擇器遇到的一些小問題(適用新手或者跟我一樣容易迷糊的銀)

1.輸入后輸入框無選定值顯示

props屬性用于配置選項,label,value,children分別設置為對應顯示屬性,值,子節點。選擇后無顯示值可能是props配置寫錯了,檢查一下單詞是否拼寫錯誤,比如label寫成了lable

2.動態懶加載

官網示例:

<el-cascader :props="props"></el-cascader>

? ? ? ? props: {

? ? ? ? ? lazy: true,

? ? ? ? ? lazyLoad (node, resolve) {

? ? ? ? ? ? const { level } = node;

? ? ? ? ? ? setTimeout(() => {

? ? ? ? ? ? ? const nodes = Array.from({ length: level + 1 })

? ? ? ? ? ? ? ? .map(item => ({

? ? ? ? ? ? ? ? ? value: ++id,

? ? ? ? ? ? ? ? ? label: `選項${id}`,

? ? ? ? ? ? ? ? ? leaf: level >= 2

? ? ? ? ? ? ? ? }));

? ? ? ? ? ? ? // 通過調用resolve將子節點數據返回,通知組件數據加載完成

? ? ? ? ? ? ? resolve(nodes);

? ? ? ? ? ? }, 1000);

? ? ? ? ? }

其中,只需要將const nodes = 【請求數據的異步函數,返回的是一個數組】

? ? ? ? ? ? ? ? .map(item=> ({

? ? ? ? ? ? ? ? ? value: item.value屬性值

? ? ? ? ? ? ? ? ? label: ?item.label屬性值

? ? ? ? ? ? ? ? ? leaf: level >= 2? ? ? ? ? ? ? ? }));

稍作修改即可,注意resolve中傳遞的數據必須是map遍歷修改后的數據,切記不要傳成原數據。

動態加載示例:

html:

<el-cascader

?:props="props"

v-model="value"

></el-cascader>

<template #default="{ node, data }">

? ? <span>{{ data.name }}</span>//要顯示的屬性名

? </template>

js:

props: {

? ? ? ? ? lazy: true,

? ? ? ? value:'id',

? ? ? ? label:'name',//兩項必須配置,否則頁面無顯示

? ? ? ? ? lazyLoad:async (node, resolve) {

? ? ? ? ? ? const {value, level } = node;//value是點擊后獲取的值,再去請求下一次異步數據,根據level 判斷是第幾級

let nodes=[];

if(level==0){

nodes=第一次異步請求數據

}else{

nodes=第二次異步數據(value)

}

nodes=nodes.?.map(item => ({

? ? ? ? ? ? ? ? ? value: item.value

? ? ? ? ? ? ? ? ? label: item.name

? ? ? ? ? ? ? ? ? leaf: level >= 1//數值根據你的選擇器層級來確定

? ? ? ? ? ? ? ? }));

? ? ? ? ? ? ? resolve(nodes);

? ? ? ? ? }

? ? ? ? }

? ? ? };

3.如果你的葉子節點數據仍有>符號顯示還有下一級數據,在map時手動添加leaf屬性布爾值,true則是葉子節點數據。

(菜雞一枚,歡迎老司機帶帶我)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容