使用antdv Cascader级联组件遇到的问题

1.更改选择后的展示内容

参数：displayRender

<a-cascader v-else
    :field-names="{ label: 'name', value: 'id', children: 'children' }"
    :options="gradeClassList"
    :display-render="displayRender"
    @change="changeGradeClass"
    placeholder="请选择班级"  />


//js代码
/**
 * 用于级联组件仅展示最后一级内容
 */
displayRender({ labels }){
  return labels[labels.length - 1];
},

2.动态加载数据设置默认值

注意要使用v-model，不能使用defaultValue

注意要使用v-model，不能使用defaultValue

注意要使用v-model，不能使用defaultValue

静态数据使用defaultValue没问题，但是动态加载的数据就不能这么用了。

笔者是一个vue小白，就在这里掉进坑里了，折腾了老半天没爬上岸，最后没办法请大佬救场，分分钟给解决。

<a-cascader v-else
   :field-names="{ label: 'name', value: 'id', children: 'children' }"
   :options="gradeClassList"
   v-model="gradeClassName"
   :display-render="displayRender"
   expandTrigger="hover"
   @change="changeGradeClass"
   placeholder="请选择班级"  />


/**
* 级联切换默认显示值
*/
gradeClassName(){
  let {gradeId, classId} = this.checkData || {}
  if (gradeId && classId)
    return [gradeId, classId]
  return []
}

注意：v-model值不能直接使用['xx','xx']，需要通过变量的方式，否则vs编辑器报错。