后端同学说，只希望前端将Cascader（级联选择器）选中的叶子节点的value上传，不想直接要Cascader（级联选择器）change事件的value，怎么办？
后端同学认为change事件的value的前面的几个元素对他毫无用处，他不想接收。怎么办？
办法至少有2个：
第一个办法是从value取末位元素就好了。form.aaa照传服务器，但是不作数，form.bbb才是后端想要的东西。
<el-cascader
v-model="form.aaa"
:options="options"
@change="form.bbb = $event[$event.length-1]"></el-cascader>
第二种办法，官方手册提供了一个方法叫getCheckedNodes，getCheckedNodes()得到一个数组，Cascader是单选的话就是一个元素，是多选的话可能会有多个元素，每个元素是一个大对象，取其中的value即可。用法是（假设Cascader是多选）：
<el-cascader
ref="xxx"
v-model="form.aaa"
:options="options"
@change="form.bbb = $refs.xxx.getCheckedNodes().map(v=>v.value)"></el-cascader>
后端同学又说，他只想把叶子节点的值返回前端，但Cascader（级联选择器）的值是数组，所以，现在只知道末尾元素的前提下，如何推算出整个数组？
我们知道单选模式下Cascader的值一定是数组，哪怕只有一个元素也是[value]的形式。
假设我们创建表单的时候，向服务器提交的数据是[22, 35]。
后来我们编辑表单，服务器向前端返回的值，由于各种原因吧，后端只给你返回了35这个数值（或字符串），而你并不知道数组前面的元素有几个、各是多少。也就是说，你编辑表单的时候，如果不原样给Cascader传[22, 35]，Cascader是不会正确显示当前值的，但你又的确不知道前面的元素。
怎么办？
可以新建一个方法，采用循环+递归，谁命中35谁就return valueArr，这个valueArr就是Cascader需要的值。
queryCascader(value, children, valueArr = []) {
for (var i = 0; i < children.length; i++) {
const item = children[i];
if (item.value === value) {
return valueArr.concat([value]);
} else if (item.children) {
const result = this.queryCascader(value, item.children, valueArr.concat([item.value]));
if (result) {
return result;
}
}
}
}
使用：
不支持多选的话，使用很简单：
const result = this.queryCascader(35, this.thatOptions);
支持多选的话，无非是服务器返回一个数组，或者也是分着返回，但前端可以组成一个数组，这时候map一下就好了：
const resultList = ['564', '324'].map(v => {
return this.queryCascader(v, this.thatOptions);
});
如果想获得级联的Label呢？写法也类似，略作修改：
queryCascaderLabels(value, children, labelArr = []) {
for (var i = 0; i < children.length; i++) {
const item = children[i];
if (item.value === value) {
return labelArr.concat([item.label]);
} else if (item.children) {
const result = this.queryCascaderLabels(value, item.children, labelArr.concat([item.label]));
if (result) {
return result;
}
}
}
},
如何让Cascader默认显示它的第一大项的第一小项的第一更小项的……？
首先我们得计算出它的第一大项的第一小项的第一更小项的……是哪个。依然用递归。data初始传入Cascader数组对象，result初始传入[]。
recurFirst(data, result) {
if (data[0].children) {
return this.recurFirst(data[0].children, result.concat[data[0].value])
} else {
return result.concat(data[0].value);
}
},
啥时候用Cascader（级联选择器）？啥时候用Tree（树形控件）？
Cascader（级联选择器）的级联面板跟Tree更像一些，不过级联面板是向右延伸，Tree是向右也向下延伸。
Cascader（级联选择器）只能同时展开一条路，不能全体展开，Tree可以全部展开。
Cascader（级联选择器）想勾选一个中层节点，必须设置“父子节点取消关联”，而且，勾选中层节点不代表它的下层会被自动勾选，而Tree一旦勾选了中层节点，则下层所有节点都会被自动勾选。
如果你的场景是“分类型场景”，这种场景往往只想要叶子节点，那么可能Cascader（级联选择器）会更好用一点，如果你的场景是“架构型场景”，例如大大小小的部门架构上都挂载着部门名称、领导、员工、资金……，也就是说你不是只要叶子节点，你是中层和叶子全要，那么必然要用Tree。
对Cascader（级联选择器）只传递一个中层节点的值是无效的，value必须从顶层value开始，但是对Tree可以传递任何一个节点的值，Tree都会把它和它的所有后代全勾上，且把它的各级祖先“半勾选”。
上传时：对于Cascader（级联选择器），后端同学可能会说“我只需要change事件value的末位元素”，这往往没任何问题，但是对于Tree，就要看具体场景，如果需要上传中层节点，那么后端同学就必须接收中层节点，因为value中每一个元素都是有用的。如果不需要中层节点，那么后端同学依然可以要求只传末位元素（但这种场景，更应该考虑使用Cascader（级联选择器））。
返回时：对于Cascader（级联选择器），后端同学假如只给前端返回value末位元素，前端通过自己递归计算（上文说过了）是可以推算出组件需要的value的，但是对于Tree，前端给后端传value，后端就必须全接住，因为全有用，后端给前端发value可以全发，也可以只发叶子节点，Tree会自动计算，然后自动勾选上层节点，并不需要自己写一个递归函数。
