1、需求
el-cascader内部是数组形式的,而后台接口只需传入数组的最后一个字段,但修改时候往往也只返回这最后一个字段,导致el-cascader无法正确回显
2、原因分析
v-model属性才是回显的关键,只有绑定了v-model属性才会让
<el-cascader \/>
回显,而且数组中的值(即:targetViewId
值)一定是最后一级的id加上它父级的id组成
3、解决方案
由于后端返回来的只有最后一级的id,所以我们需要写一个递归来拿到最后一级id和它父级id的数组。 废话不多说直接上代码
/*
* el-cascader递归获取父级id
* @param list 数据列表
* @param id 后端返回的id
* propsCascader 是el-cascader props属性
**/
getParentsById(list, id) {
for (let i in list) {
if (list[i][this.propsCascader.value || 'value'] == id) {
return [list[i][this.propsCascader.value || 'value']]
}
if (list[i].children) {
let node = this.getParentsById(list[i].children, id)
if (node !== undefined) {
// 追加父节点
node.unshift(list[i][this.propsCascader.value || 'value'])
return node
}
}
}
},
4、效果图
5、注意
如果直接将targetViewId赋值后台返回的最后一个id值,也能回显(最后一级没有选中),其效果如下:
6、相关文章
vue3+ts基于Element-plus再次封装基础组件文档