el-cascader 级联组件根据最后一级id回显

以上是需求效果图，当返回数据只有最后一级的id时进行回显。

级联组件并不能根据最后一级id回显，回显的数据是个数组形式的，所以v-model绑定的数数组格式才能回显，例如绑定的是[1,2,3],若只绑定3将不能正常回显。

所以我们可以根据最后一级id找到父级id进行回显。

<el-form-item label="parentId" prop="parentId">
          <el-cascader
            style="width: 100%;"
            v-model="parentId"
            @change="changeClick"
            :options="options"
            :props="CascaderProps"
            clearable
          />
</el-form-item>

const CascaderProps = {
  value: 'id',
  label: 'title',
  children: 'child',
  emitPath: false, // 若设置 false，则只返回该节点的值，只返回最后选择的id
  checkStrictly: true,  //来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
}

//拿级联组件绑定v-model的id数组
/*
    list:级联组件树形结构
    id:最后一级id
*/
const getParentsById = (list, id) => {
  for (let i in list) {
    if (list[i].id == id) {
      //查询到就返回该数组对象的value
      return [list[i].id]
    }
    if (list[i].child) {
      let node = getParentsById(list[i].child, id)
      if (node !== undefined) {
        //查询到把父节把父节点加到数组前面
        node.unshift(list[i].id)
        return node
      }
    }
  }
}
//调用后台接口拿详情数据
const getRouterInfoList = async id => {
  const { data } = await getRouterInfo(id)
  ruleForm.value = data
    //一下是调用拿级联id数组的方法
  let arr = ref([])
  arr.value = await getParentsById(options.value, id)
  parentId.value = JSON.parse(JSON.stringify(arr.value))
}

以上为全部内容，不足之处请大家批评指正！