初次使用級聯(lián)選擇器遇到的一些小問題(適用新手或者跟我一樣容易迷糊的銀)
1.輸入后輸入框無選定值顯示
props屬性用于配置選項,label,value,children分別設(shè)置為對應(yīng)顯示屬性,值克胳,子節(jié)點。選擇后無顯示值可能是props配置寫錯了圈匆,檢查一下單詞是否拼寫錯誤漠另,比如label寫成了lable
2.動態(tài)懶加載
官網(wǎng)示例:
<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
? ? ? ? ? ? ? ? }));
? ? ? ? ? ? ? // 通過調(diào)用resolve將子節(jié)點數(shù)據(jù)返回,通知組件數(shù)據(jù)加載完成
? ? ? ? ? ? ? resolve(nodes);
? ? ? ? ? ? }, 1000);
? ? ? ? ? }
其中跃赚,只需要將const nodes = 【請求數(shù)據(jù)的異步函數(shù)笆搓,返回的是一個數(shù)組】
? ? ? ? ? ? ? ? .map(item=> ({
? ? ? ? ? ? ? ? ? value: item.value屬性值
? ? ? ? ? ? ? ? ? label: ?item.label屬性值
? ? ? ? ? ? ? ? ? leaf: level >= 2? ? ? ? ? ? ? ? }));
稍作修改即可,注意resolve中傳遞的數(shù)據(jù)必須是map遍歷修改后的數(shù)據(jù)纬傲,切記不要傳成原數(shù)據(jù)满败。
動態(tài)加載示例:
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是點擊后獲取的值叹括,再去請求下一次異步數(shù)據(jù)算墨,根據(jù)level 判斷是第幾級
let nodes=[];
if(level==0){
nodes=第一次異步請求數(shù)據(jù)
}else{
nodes=第二次異步數(shù)據(jù)(value)
}
nodes=nodes.?.map(item => ({
? ? ? ? ? ? ? ? ? value: item.value
? ? ? ? ? ? ? ? ? label: item.name
? ? ? ? ? ? ? ? ? leaf: level >= 1//數(shù)值根據(jù)你的選擇器層級來確定
? ? ? ? ? ? ? ? }));
? ? ? ? ? ? ? resolve(nodes);
? ? ? ? ? }
? ? ? ? }
? ? ? };
3.如果你的葉子節(jié)點數(shù)據(jù)仍有>符號顯示還有下一級數(shù)據(jù),在map時手動添加leaf屬性布爾值汁雷,true則是葉子節(jié)點數(shù)據(jù)净嘀。
(菜雞一枚报咳,歡迎老司機(jī)帶帶我)