Element UI各种使用问题汇总（Cascader、Tree篇）

后端同学说，只希望前端将Cascader（级联选择器）选中的叶子节点的value上传，不想直接要Cascader（级联选择器）change事件的value，怎么办？

后端同学认为change事件的value的前面的几个元素对他毫无用处，他不想接收。怎么办？

办法至少有2个：

第一个办法是从value取末位元素就好了。form.aaa照传服务器，但是不作数，form.bbb才是后端想要的东西。

第二种办法，官方手册提供了一个方法叫getCheckedNodes，getCheckedNodes()得到一个数组，Cascader是单选的话就是一个元素，是多选的话可能会有多个元素，每个元素是一个大对象，取其中的value即可。用法是（假设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（树形控件）？

1. Cascader（级联选择器）的级联面板跟Tree更像一些，不过级联面板是向右延伸，Tree是向右也向下延伸。

2. Cascader（级联选择器）只能同时展开一条路，不能全体展开，Tree可以全部展开。

3. Cascader（级联选择器）想勾选一个中层节点，必须设置“父子节点取消关联”，而且，勾选中层节点不代表它的下层会被自动勾选，而Tree一旦勾选了中层节点，则下层所有节点都会被自动勾选。

4. 如果你的场景是“分类型场景”，这种场景往往只想要叶子节点，那么可能Cascader（级联选择器）会更好用一点，如果你的场景是“架构型场景”，例如大大小小的部门架构上都挂载着部门名称、领导、员工、资金……，也就是说你不是只要叶子节点，你是中层和叶子全要，那么必然要用Tree。

5. 对Cascader（级联选择器）只传递一个中层节点的值是无效的，value必须从顶层value开始，但是对Tree可以传递任何一个节点的值，Tree都会把它和它的所有后代全勾上，且把它的各级祖先“半勾选”。

6. 上传时：对于Cascader（级联选择器），后端同学可能会说“我只需要change事件value的末位元素”，这往往没任何问题，但是对于Tree，就要看具体场景，如果需要上传中层节点，那么后端同学就必须接收中层节点，因为value中每一个元素都是有用的。如果不需要中层节点，那么后端同学依然可以要求只传末位元素（但这种场景，更应该考虑使用Cascader（级联选择器））。

7. 返回时：对于Cascader（级联选择器），后端同学假如只给前端返回value末位元素，前端通过自己递归计算（上文说过了）是可以推算出组件需要的value的，但是对于Tree，前端给后端传value，后端就必须全接住，因为全有用，后端给前端发value可以全发，也可以只发叶子节点，Tree会自动计算，然后自动勾选上层节点，并不需要自己写一个递归函数。