初次使用級聯選擇器遇到的一些小問題(適用新手或者跟我一樣容易迷糊的銀)
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則是葉子節點數據。
(菜雞一枚,歡迎老司機帶帶我)