VueJS Element UI自定义控件:Cascader级联下拉框,解决查看时树形数据回显

下拉框在业务开发中还是很常用的,比如下拉菜单,上级组织机构选择,各种分类等等。在用到Element UI的Cascader 级联选择器下拉框组件时,不能满足我的需求,就在此基础上自定义了控件。

存在的问题:

1、Element UI官方的级联下拉控件el-cascader选择数据后,被选中的数据是数组形式的,例如:[7,6,1],但在数据库中保存时,一般只保存ID,不保存数组。所以就需要我们自己处理。

VueJS Element UI自定义控件:Cascader级联下拉框,解决查看时树形数据回显_第1张图片

 

2、查看页面时又需要回显选择的上级菜单,所以需要根据保存的ID查找到它所有上级,才能正常显示。官方组件没有自带这个功能。

下面是基于官方组件自定义封装的组件,解决了上面两个问题。你只要新建一个Cascade.Vue的文件,把下面的内容全部拷贝进去就行了。