当级联选择器为详情页面,只展示回显数据文本
<span v-else :class="componentProps.option.cssClass">{
{getCheckValue(value)}}</span>
/**
* 处理详情数据
* @param value 选中value默认值
*/
getCheckValue(value){
let str = ''
if(value){
let val = this.componentProps.option.multiple?value:[value];//多选默认是二维数组,单选改为二维数组,统一处理数据。例:[["option1","option1-1","option1-1-1"],["option3"]]
val.map((item,indexValue) =>{
//[["option1","option1-1","option1-1-1"],["option3"]]
let arr = '';
item.map((itemValue,index) => {
//["option1","option1-1","option1-1-1"]
if (index + 1 == item.length) {
//若数组里只有一个元素 ["option3"]
arr += this.valueTest(itemValue);
}else{
//["option1","option1-1","option1-1-1"]
arr += this.valueTest(itemValue)+"/";
}
})
if (indexValue == 0) {
//第一个值没有分隔
str += arr;
}else{
str = str +","+ arr;
}
})
return str;
}
},
/**
* 递归
* @param itemValue 默认值
*/
valueTest(itemValue){
let itemText = "";
if (!this.dataList && this.dataList.legth <= 0) return;//若dataList不存在直接return
funValue(this.dataList); //调用封装好的回显函数
function funValue(childrenArr) {
for (let item of childrenArr) {
//遍历数组
if (item.value === itemValue) {
//判断所在数组,是否有匹配的value
itemText = item.text;
}
if (item.children &&item.children.length > 0) {
//判断value不匹配的层级是否具有children
funValue(item.children);//存在children就回调
}
}
}
return itemText;//递归出口
},
处理空数组
/**
* 处理数据,去掉空children
* @param data 要处理的数据
*/
getTreeData(data){
// 循环遍历json数据
data?data.forEach((item) => {
if(item.children&&item.children.length<1){
// children若为空数组,则将children设为undefined
item.children=undefined;
}else {
// children若不为空数组,则继续 递归调用 本方法
this.getTreeData(item.children);
}
}):[];
return data;
},