Vue+ElementUI , el-casecader级联面板参数回显-优快云博客

本文探讨了在Vue+ElementUI中使用Cascader级联面板时，如何处理数据回显的问题。针对单选和多选的情况，提供了不同的解决方案。对于单选，可以通过遍历树形结构构造完整路径数组；而对于多选，由于构造二维数组复杂，建议后端存储JSON格式的字符串，并在前端进行JSON.parse()解析。文章还分享了两种不同的后端处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录标题

背景
一、级联面板返回的数据格式说明
二、级联面板单选（解决）
三、级联面板多选（妥协）

背景

ElementUI中Cascader 级联选择器组件作为Select 选择器组件的补充，可以帮助我们方便且友好的显示多层级数据的筛选。

但级联面板的返回数据在用于数据回显时，却显得比较麻烦。因此，现在将记录一下自己在做级联面板数据回显时的方案。

一、级联面板返回的数据格式说明

通过ElementUI中在线运行工具的调试，可以看到级联面板返回给我们的结果，是一个包含从祖宗节点到选中节点完整路径的数组，如下图所示，选中 "input输入框"时，会返回给我们一个记录选中label的value的数组：[“zujian”, “form”, “input”]。
在这里插入图片描述

多选时的数据格式也是如此，只不过变成了一个二维数组，如下图所示。

那么在数据回显时，我们必须要给级联面板的绑定值设定为完整路径数组的格式，才可以正确回显。如果后端能够把级联面板选中的值原样保存起来，那么回显就不存在任何问题了，但通常事与愿违。后端通常只会给我们返回当前选中节点的value和整个树形结构的数组，需要我们自行构造完整路径的数组。

二、级联面板单选（解决）

在只有当前选中节点的value和整个树形结构的数组时，前端构造完整路径数组的方式，类似于遍历一颗多叉树，从根节点开始记录下路径，直到找到选中节点：

 // 构造级联面板的选中参数
buildParam(){
   
	let result = []
	let searchFlag = {
   flag: false}
	this.buildSingleSeletedCasecaderVal(root, row.id, result, searchFlag)
	console.log(result)
	// 当我们需要选中当前节点的上一级节点时，可以从结果中弹出最后一个，或者重新遍历都可以
	// result.pop()
}

/**
 1. 构造单选级联面板选中数据的完整路径
 2. root : 全部数据，一颗以id='0' 为根节点的多叉树
 3. target: 寻找的目标节点id,例如 id = '2'
 4. res: 存放结果路径，例如：["0","1","2"]
 5. searchFlag : 是否找到，找到即返回递归
*/
buildSingleSeletedCasecaderVal(root, target, res, searchFlag) {
   
   if (searchFlag.flag) {
   
       return
   }
   if (root.id == target) {
   
       res