级联选择器el-cascader ——实现树形数据下的,选择任意一级和只展示选中的数据

element文档上面对于这些功能是有介绍的,但是文档写的不是很清楚,而且是多个例子,没有进行整合,这是我使用后的一个例子。
我这里的需求是可以选择每一级,,并且只显示选择的哪一级数据。
级联选择器el-cascader ——实现树形数据下的,选择任意一级和只展示选中的数据_第1张图片
级联选择器el-cascader ——实现树形数据下的,选择任意一级和只展示选中的数据_第2张图片
show-all-levels设置为false的时候显示的就是选择的最后一级
props是级联选择器的配置项
checkStrictly为true的情况下可以遵守父子节点不互相关联,可以选择任意一级
expandTrigger是控制次级菜单的展开方式
children是指定选项的子选项为选项对象的某个属性值
这样配置好之后,虽然展示的值是单个的,但是绑定的值还是一个拥有全部路径的数组,假如想得到一个和展示的数据一样的字符串,获取绑定值这个数组的下标为数组长度-1的数据就行。

你可能感兴趣的:(vue,vue.js,javascript,elementui)