本篇文章主要记录菜鸟自己对el-cascader的使用问题，以及其中用到了零宽字符串，对大佬来说就是小儿科，对初学者可能有点帮助！请酌情观看！
最近菜鸟都在忙着做公司的新系统，以及解决生活琐事，都没空更新。不过做系统的过程中也遇见了很多很多的问题，感觉自己太菜了，很多都要请教公司另一位6年经验的大佬，真的受益匪浅！
零宽字符串不懂的可以看渡一：www.bilibili.com/video/BV1CN...
零宽字符串算是我自己想到的一个巧妙的解决办法，具体需要如下：
后端返回的数据
js
[
{
"createUserId": "1",
"createTime": "2025-04-02 17:46:08",
"updateUserId": "1",
"updateTime": "2025-04-02 17:46:08",
"fridgeId": "1907368944074145793",
"fridgeTemperatureType": "A",
"fridgeNum": 1,
"version": "1",
"location": "31231",
"layerNum": "25"
},
{
"createUserId": "1",
"createTime": "2025-04-02 17:46:15",
"updateUserId": "1",
"updateTime": "2025-04-02 17:46:15",
"fridgeId": "1907368971165155330",
"fridgeTemperatureType": "B",
"fridgeNum": 1,
"version": "1",
"location": "123"
},
{
"createUserId": "1",
"createTime": "2025-04-02 17:46:19",
"updateUserId": "1",
"updateTime": "2025-04-02 17:46:19",
"fridgeId": "1907368987678130178",
"fridgeTemperatureType": "C",
"fridgeNum": 1,
"version": "1",
"location": "12312",
"layerNum": "7"
},
{
"createUserId": "1",
"createTime": "2025-04-02 17:46:26",
"updateUserId": "1",
"updateTime": "2025-04-02 17:46:26",
"fridgeId": "1907369020548890625",
"fridgeTemperatureType": "D",
"fridgeNum": 1,
"version": "1",
"location": "12",
"layerNum": "3"
},
{
"createUserId": "1",
"createTime": "2025-04-02 17:46:30",
"updateUserId": "1",
"updateTime": "2025-04-02 17:46:30",
"fridgeId": "1907369036319473665",
"fridgeTemperatureType": "R",
"fridgeNum": 1,
"version": "1",
"location": "123123",
"layerNum": "3"
},
{
"createUserId": "1",
"createTime": "2025-04-02 17:56:40",
"updateUserId": "1",
"updateTime": "2025-04-02 17:56:40",
"fridgeId": "1907371593846669314",
"fridgeTemperatureType": "A",
"fridgeNum": 100,
"version": "1",
"location": "111",
"layerNum": "4"
},
{
"createUserId": "1",
"createTime": "2025-04-03 09:09:36",
"updateUserId": "1",
"updateTime": "2025-04-03 09:09:36",
"fridgeId": "1907601340705529857",
"fridgeTemperatureType": "A",
"fridgeNum": 51,
"version": "1",
"location": "asda",
"layerNum": "47"
},
{
"createUserId": "1",
"createTime": "2025-04-03 10:23:51",
"updateUserId": "1",
"updateTime": "2025-04-03 10:23:51",
"fridgeId": "1907620025964945409",
"fridgeTemperatureType": "A",
"fridgeNum": 21,
"version": "1",
"location": "12"
},
{
"createUserId": "1",
"createTime": "2025-04-17 14:29:10",
"updateUserId": "1",
"updateTime": "2025-04-17 14:29:10",
"fridgeId": "1912755191600173057",
"fridgeTemperatureType": "A",
"fridgeNum": 12,
"version": "1",
"location": "22"
}
]html 代码比较简单
html
<el-cascader clearable ref="fridgeCascader" @change="fridgeChange" :props="props" />前端的展示效果
这里需要通过fridgeTemperatureType对冰箱进行分类，然后还要通过后端返回的字典，去确定分类的冰箱是什么类型的。
字典数据
json
{
"sample_fridge_class":[
{"label":"-(84°C~80°C)","value":"A","elTagType":"primary"},
{"label":"-40°C","value":"B","elTagType":"primary"},
{"label":"-20°C","value":"C","elTagType":"primary"},
{"label":"4°C","value":"D","elTagType":"warning"},
{"label":"常温","value":"R","elTagType":"info"}
]
}具体代码
js
const props = {
lazy: true,
lazyLoad(node, resolve) {
console.log(node);
const { level } = node;
if (level === 0) {
// 请求上面的json
listStorageFridge(queryParams)
.then(async (res) => {
if (+res.code === 200) {
// 将res.data.records按照fridgeTemperatureType分类
const fridgeTemperatureTypeMap = {};
res.data.records.forEach((item) => {
if (!fridgeTemperatureTypeMap[item.fridgeTemperatureType]) {
fridgeTemperatureTypeMap[item.fridgeTemperatureType] = [];
}
fridgeTemperatureTypeMap[item.fridgeTemperatureType].push(item);
});
// vueUse的until方法，https://vueuse.nodejs.cn/shared/until/，可以等待某个数据有值再执行后面
await until(sample_fridge_class).toMatch((v) => unref(v).length > 0);
let nodes = Object.entries(fridgeTemperatureTypeMap).map(([k, v]) => {
// 循环sample_fridge_class（字典），通过判断value和k是否相等，取出lable
const label = dictData.value.sample_fridge_class.find(
(item) => item.value == k
).label;
// 处理第二层
// 将v的fridgeNum作为lable，fridgeId作为value
v = v.map((item) => {
return {
label: item.fridgeNum,
value: item.fridgeId,
// 通过下一层数量来判断
disabled: item.layerNum ? false : true,
leaf: item.layerNum ? false : true,
...item
};
});
// 第一层
return {
label: k + "\u200d" + label, // 用到了零宽字符串
value: k,
children: v,
leaf: false
};
});
resolve(nodes);
} else {
ElMessage.error(res.message);
}
})
.catch((err) => {
console.log(err);
});
}
// 第三层 -- 因为第二层其实已经有了
if (level === 2) {
listStorageFridgeLayer({
fridgeId: node.data.fridgeId,
...queryParams
})
.then((res) => {
if (res.data.records.length === 0) {
// 修改为使用 disabled 属性
resolve([
{
label: "无数据",
value: null,
disabled: true,
leaf: true
}
]);
return;
}
let temp = res.data.records.map((item) => {
return {
label: item.layerValue,
value: item.fridgeLayerId,
leaf: true,
...item
};
});
resolve(temp);
})
.catch((err) => {
console.log(err);
});
}
}
};然后上面展示的储位编号 又只需要冰箱的fridgeTemperatureType，不需要label，所以就变成了这样
js
// 监听冰箱选择
const fridgeChange = (value) => {
if (value) {
// 获取layerClass,判断是年就只要后两位
layerClass.value = fridgeCascader.value.getCheckedNodes()[0].data.layerClass;
// 获取el-cascader框框里面的内容
fridgeName.value.storage = fridgeCascader.value.presentText;
// 对fridgeName.value.storage进行处理展示
const tempArr = fridgeName.value.storage.split("/");
const last = layerClass.value == "3" ? tempArr[2].slice(-2) : tempArr[2];
const tempArr2 = tempArr[0].split("\u200d"); // 通过零宽字符串进行分割，就避免界面上展示，也更好分割
fridgeName.value.storage = tempArr2[0].trim() + " - " + tempArr[1].trim() + " - " + last.trim();
......
};