淘先锋技术网

首页 1 2 3 4 5 6 7

看了element的官方文档,发现cascader没有对value的值进行说明,但是开发功能在编辑的时候,出现数据回显不显示。几经波折,终于发现了好的解决办法。
cascader的options组件传入以下模式:
options=[
 {
        value: 'zhinan',
        label: '指南', 
        children:[
            {
               value: 'zhihu',
                label: '知乎', 
            }
        ]
    }
 ]
 后台返回来的树形结构处理以下成上面的格式:
 处理树形结构的递归方法:
 var data=[ ] //后台返回的树形结构数据,对它进行处理
 var arr=[ ]  //装options的值
 const handleOptions=(data,arr){
     data.forEach((item,index)=>{
         let obj={
             value:item.id,
             label:item.name
         };

        arr[index]=obj;

         if(item.children!==null){

               obj.children=[];

               arr[ index] =obj;

              handleOptions(item.children, arr[index].children=[])

         }

         

           
     })

    return arr
 }

返回来的arr,就是处理好的标准cascader模式


<el-cascader
    v-model="value"
    :options="options"

    :show-all-levels="false"
    :props="{checkStrictly: true }"

    clearable
    ></el-cascader>
     后台返回详情的数据时,记得要求返回 [ " zhinan''] (显示他的上级关系的数组回来),此时,默认勾选上了,如果还是勾选不上,加上个setTimeOut的定时函数,就ok了。

   感慨一句,看了很多cascader的回显文章,都讲得好复杂,但是只要花点小心思研究element的组件,自然会探索出解决的办法。

   另外,据网友的处理方法,加个placeholder的处理,也是可以的~~~