el-cascader级联展开时,⽆法定位到⼦节点，去除末节点的children 背景
基于vue的开发中有个级联选项，级联选项需要的是标准的树形json菜单，不能有空⼦节点，否则⼀直处于展开状态吗，不能到达⼦节点.后台我⽤的java，输出的json对象如下:
⼦节点中⼀直存在 “children”:[],⽽el-cascader 需要的格式如下:
不允许有空的children节点出现，因此我需要对后台返回的json进⾏处理，当然也可以在后台单独处理，去掉children的空节点.
解决思路
1. 将后台返回的json对象转成成json字符串，如下代码
var jsonStr=JSON.stringify(response.data);
2. 替换字符串中末节点中的children[]的字符串，操作如下
let place(/\"children"\:\[]/g,"no:0");
处理替换后的数据如下
注意：由于",[],：都属于特殊符号，因此我们需要通过\进⾏转义，否则是不到这些替换的符号的.
3. 将替换后的json字符串转化成json对象，重新赋值给级联标签即可.
JSON.parse(JSON.stringify(response.data)
4. 完整的代码
initDistrict(){//初始化区域数据
getDistrictTree().then(response =>{
var jsondata =JSON.parse(JSON.stringify(response.data).replace(/\"children"\:\[]/g,"\"no\":0"));
console.log(jsondata,'jsondata');
this.districtOptions = jsondata;
})
}
5. 实现效果如下
前端替换字符串的效率还是很⾼，所以不⽤过于担⼼会影响效率，当然数据量很⼤的话最好在后台处理.vuejson转对象

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。