1. 概述
级联选择器用途比较广泛，例如选择人员所属的单位，可以从总公司-分公司-部门-子部门这样级联选择下来。
如果自己去实现一个级联选择器，实际上是难度较大的，Element提供了一个功能相当完善的级联选择器，本篇文章就进行一个详细的介绍。
2. 数据绑定
2.1 默认数据绑定
级联选择器默认会绑定一个数组，节点的显示文本和值分别对应label、value属性，节点的后代对应children属性。示例代码如下：
默认数据绑定,选中值{{value}}
<el-cascader v-model="value" :options="defaultOptions"></el-cascader>
1
2
export default {
data() {
return {
value: [],
defaultOptions: [{
value: '1',
label: '山东',
children: [{
value: '2',
label: '济南',
},
{
value: '3',
label: '泰安',
}],
}],
}
}
}
对应效果如下，注意绑定的值是一个数组，记录了选择路径每个节点的值。
2.2 指定绑定数据格式
如果后端接口已开发完毕，后端返回的数据格式是固定的，也可以通过props参数指定绑定数据的格式，代码如下，将节点文本、节点值绑定的属性改为了id和name。
指定绑定属性
<el-cascader v-model="value" :options="myOptions" :props="{label:'name',value:'id',children:'son' }"></el-cascader>
1
2
myOptions: [{
id: '1',
name: '山东',
son: [{
id: '2',
name: '济南',
},
{
id: '3',
name: '泰安',
}],
}],
3. 常用功能
3.1 修改触发方式
默认情况下，需要点击上一级的选项，才能展开下一级。通过修改expandTrigger参数可以实现悬停展开效果。
修改触发方式，默认为click点击触发,可以修改为hover悬停触发
<el-cascader v-model="value" :options="defaultOptions" :props="{ expandTrigger: 'hover' }"></el-cascader>
1
2
3.2 增加清空按钮
通过设置clearable，增加一个清空按钮，点击该按钮可清空选中项。
增加清空按钮
<el-cascader v-model="value" :options="defaultOptions" clearable></el-cascader>
1
2
效果如下：
3.3 可搜索
通过为el-cascader设置filterable属性，即可轻松启用搜索功能。
可搜索
<el-cascader v-model="value" :options="defaultOptions" filterable></el-cascader>
效果如下：
3.4 选中项只显示最后一级
当级别较多时，显示全部的级别会显得很杂乱，我们可以设置:show-all-levels="false"来控制el-cascader只显示最后一级别。
只显示最后1级
<el-cascader v-model="value" :options="defaultOptions" :show-all-levels="false"></el-cascader>
1
2
效果如下：
3.5 可选中任意一级
有时候，我们想选中不是最后一级的节点，可以通过checkStrictly参数来实现。
可选中任意1级
<el-cascader v-model="value" :options="defaultOptions" :props="{ checkStrictly: 'true' }"></el-cascader>
效果如下：
3.6 面板样式
默认为下拉框的样式，也可以完整显示为一个面板，使用l-cascader-panel标签即可。
面板样式：
<el-cascader-panel v-model="value" :options="defaultOptions"></el-cascader-panel>
效果如下：
3.7 自定义节点内容
可以通过插槽自定义节点的内容，为节点添加图标、修改字体、修改颜色。
自定义节点内容
<el-cascader v-model="value" :options="defaultOptions">
<template slot-scope="{ data }">
<span style="color:red;">{{ data.label }}</span>
</template>
</el-cascader>
template中间的部分可以任意自定义，上面代码运行效果：
4. 动态加载下级
有时候节点数量很多，一次性加载速度会很慢，此时可以选择动态的加载下一级别。
动态加载下级
<el-cascader :props="myProps"></el-cascader>
1
2
myProps: {
lazy: true,
lazyLoad(node, resolve) {
console.log(node);
// 通过调用resolve将子节点数据返回，通知组件数据加载完成
let nodes = [];
if (node.level == 0) {
nodes.push({
label: '山东',
value: 1
});
} else if (node.level == 1) {
nodes.push({
label: '济南',
value: 2
});
}
resolve(nodes);
}
}
解释下上面的代码，通过lazy:true启用动态加载，每次点击父节点会出发lazyLoad方法，并将节点数据node传递进来。
我们根据node.level判断当前是第几个级别，如果是第0级则返回包含山东的数组，如果是第1级则返回包含济南的数组。
最后的resolve函数是关键，会将数组的元素解析为当前父节点的子节点。
注意在实际项目开发中，我们可以根据node.data来获取节点绑定的数据信息，从而向后端查询当前节点的子节点数组。
5. 小结
el-cascader提供了灵活的功能，快捷的实现方式，在级联选择时非常好用。
相比于使用多个下拉框的方式，级联选择器节省了屏幕空间，且可以支持任意多个级别，无疑是更好的选择。