看了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的处理,也是可以的~~~