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