element + el-cascader级联选择器回显,详情页面;处理空数组

当级联选择器为详情页面,只展示回显数据文本
在这里插入图片描述

<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;
 },

猜你喜欢

转载自blog.csdn.net/yxgd_1442962728/article/details/112319620