ps个人网站设计,网站建设的总结与改进,甘州区建设局网站,windows10优化工具Element UI CascaderPanel级联组件使用和踩坑总结
问题背景
需求中需要用到Element UI的 CascaderPanel组件#xff0c;并且支持多选#xff0c;定制化需求#xff0c;比如某节点被选择#xff0c;等价于该节点下面所有子节点都被选择#xff0c; CascaderPanel组件返回…Element UI CascaderPanel级联组件使用和踩坑总结
问题背景
需求中需要用到Element UI的 CascaderPanel组件并且支持多选定制化需求比如某节点被选择等价于该节点下面所有子节点都被选择 CascaderPanel组件返回的选择数据为选择的所有节点需要过滤到只返回到最上方被选中的层级。如图所示
问题分析
1el-cascader-panel组件基本使用 el-cascader-panel reftest :optionsmyOptions changehandNodeChange(test) v-modelmyOptionsSelectedAreas :props{ multiple: true }2过滤所有节点过滤方法!(item.parent item.parent.checked)即排除掉父节点存在且被选中的节点得到过滤后的节点 // 监听级联组件数据变化隐藏父组件选择状态下的子组件。handNodeChange(value) {let checkedNodeList this.$refs[value].getCheckedNodes();checkedNodeList checkedNodeList.filter(item {return !(item.parent item.parent.checked);});this[value] checkedNodeList;this.myOptionsStandardSelectedAreas [];checkedNodeList.forEach(item {this.myOptionsStandardSelectedAreas.push(item.path.join(-));});},3坑最后一级即叶子结点也有children只不过children[],这就导致组件无法确定最后一级所以无法触发change事件。把叶子节点的children删除即可该坑在Element Plus中测试已没有。 // 遍历得到需要的树结构dealNodeTree(node) {if (!node) {return null;}let temNode this.changeNode(node);if (temNode.children) {// 处理children字段temNode.children temNode.children.map(item {return this.dealNodeTree(item);});}return temNode;},4服务器返回的字符串或者选中数组直到选中节点最高父级需要获取所有选中的子节点才能让级联组件正常显示。 dfs对根节点进行深度遍历获取所有路径存到全路径列表中和最高级父节点进行匹配显示匹配的节点即可。 getAllPath(node, path []) {if (!node) {return null; // 如果为空节点则返回null}const currentVal node.value; // 当前节点值path.push(currentVal); // 将当前节点值添加到路径数组中if (!node.children || node.children.length 0) {// console.log(路径:, path); // 输出完整路径this.myResult.push(path);} else {for (let i 0; i node.children.length; i) {this.getAllPath(node.children[i], [...path]); // 对每个子节点进行递归调用}}// path.pop(); // 移除最后一个元素因为已经处理过该节点了},
