使用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编辑器报错。

代码库:https://github.com/zhang-hai/MySummary

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容