element组件库的Cascader 级联选择器使用

element-ui组件库的Cascader 级联选择器，vue项目中经常能用到的一个组件，但里面的属性较多，现将梳理一下，以供参考
就以官方给的hover 触发子菜单为例，给出了以下参数

<el-cascader
 	expand-trigger="hover"
    v-model="value"
    :options="options"
    :props="cateProps"
    @change="handleChange">
</el-cascader>

v-model是双向绑定的数组，在data中进行定义

options是你所要绑定的数据源，如商品数据或用户列表等ajax请求出来的后台数据

props是级联选择框配置对象，这里代表着你建立的选择框能看到的所有内容，一般有value、label、children三个参数，value表示选中的对应的值，如id，label是选中对应的id值后所展示出的内容，一般用名称名字来表示，children是所嵌套的节点

@change，自然是要在methods中定义函数，级联选择框的所有变化事件都要在这里进行改变，也就是说用户在选择这个级联选择框中的内容，最终是通过这个change事件来获取并展示出对应的业务内容。

级联选择框默认的是无论一级二级三级分类，只要下一级没有内容，都可以进行选择，那如何才能让用户只能选中三级分类呢，此时需要监听选择器的change事件，判断用户选中的数组长度，（数组长度就是数据内容，是通过v-model绑定在data的数据数组），如果数组长度等于3，就允许进行选择并渲染，如果长度不等于3，表示用户没有对三级分类进行选择，此时则return出去不做任何处理即可。

handleChange() {
		//value是v-model绑定的值
        if(this.value.length!==3){
           this.value=[]
            return
        }
        //发起相应的数据请求
    }

注意：级联选择框中，如果数据过多会有高度溢出的情况，这时在全局样式表中添加一个固定的高度即可

.el-cascader-menu {
    height: 300px;
  }