Cascader cascade element selected component library using

element-ui component library Cascader cascade selector, vue often able to project a component, but more inside the property, now comb, for reference
to an official to trigger the hover submenu, for example, It gives the following parameters

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

v-model is an array of two-way binding, which is defined in data

options that you want to bind the data source, background data such as product data, or user lists ajax request out

props is a cascade configuration object selection box, where representatives of all the content you've created a selection box can be seen, generally value, label, children three parameters, value representation corresponding to the selected value, such as id, label is select the corresponding after id value exhibited by content, name by name to represent the general, children are the nested node

@change, we naturally have to define the function, all changes cascade of events here in the selection box should be changed in methods, ie the user selects this cascade selection box, and ultimately to get through this change event and demonstrate the business corresponding to the content.

Cascade selection box whether a default is two three-tier classification, as long as the next level without content, you can choose, how can it allow users to select only three-tier classification of it, then need to listen for the change event selector determining the length of the array selected by the user, (array length is the data content, is bound by v-model data in the data array), if the length of the array is equal to 3, allows to select and render the length is not equal to 3, indicating that the user no three-tier classification is selected, then return at this time to go out without any treatment.

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

Note: cascading selection box, there will be the case if the data is too highly overflow, then add a fixed height to the global style sheet

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