Cascader: refactor and add multiple mode.

[SimonaliaChen]

• refactor cascader，disassemble complex logic and components，export cascader-panel;
• add multiple mode;
• change the way of change-on-select and filter interaction;
• fix expand bug ([Bug Report] [Cascader cascade selector] expand-trigger: hover, expansion switch of secondary menu BUG #14669);
• fix props value and label can not be same when filterable ([Bug Report] Cascader, search filterable, set props, select search results and report errors #15140);
• add filter-method to customize search logic ([Feature Request] Support custom filter function for cascader component #13339);

Please make sure these boxes are checked before submitting your PR, thank you!

• Make sure you follow Element's contributing guide (中文 | English | Español | Français).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer relative issues for you PR.

[element-bot]

Deploy preview for element ready!

Built with commit b7d2029

https://deploy-preview-15611--element.netlify.com

[q5276]

增加多选模式挺好的，为啥把原来的单选增加了radio，略多余，而且丑，不开心

[perryoneone]

感觉单选操作有点麻烦

[smallQQx]

2.9.2版本的element ui 级联动怎么去掉了currentLabels属性？

[caoleiqing]

2.9.2版本的element ui 级联动怎么去掉了currentLabels属性？

就是啊，升级了以后页面就有了bug,低版本用了currentLabels，不知道后面会不会加上。

[nikylin]

这个代码没升级前这样写，升级后面板就多出来单选框，把 :change-on-select="true"去掉，单选框就没了

[zhutiegang]

这个改动真的很糟心，加个radio操作起来很混乱，也不兼容以前的change-on-select，以前以element-ui构建的组件没办法升级

[hoythan]

这根本不是重构，是重写。需要开发者将以前的组件按照新规则重写。

[chenning111]

为什么选择即改变移除了 新版本 也太难操作了吧 产品经理提点击字也要选中 怎么搞哦

[Younglina]

选择即改变移除了 真的难顶

[SimonaliaChen]

增加多选模式挺好的，为啥把原来的单选增加了radio，略多余，而且丑，不开心

因为以前的交互设计无法区别 展开 和 选中 操作，设计师认为两个交互不能统一，所以加了 radio。

[SimonaliaChen]

2.9.2版本的element ui 级联动怎么去掉了currentLabels属性？

currentLabels 本身就是未暴露的API。内部状态不建议直接调用，风险需开发者自己承担。以后应该也没有再暴露的可能啦 ：）

[rehack]

@SimonaliaChen currentLabels移除就移除吧，总得提供有一个代替的方案或其他方法来获取选中节点对应的label文本吧~
有人说用getCheckedNodes来获取，我试了一下，只能获取到最后一个节点的信息。不能获取选中的那一组的节点的信息。
然后我在this.$refs[xxx]这个对象里面发现有inputValue 和presentText这两个属性，当触发change事件的时候，我打印这个两个属性都是null, 当第二次触发change事件的时候，才能打印出上一次选择过的那一组节点文本信息。
现在卡在这里了，好难受。

[SimonaliaChen]

@SimonaliaChen currentLabels移除就移除吧，总得提供有一个代替的方案或其他方法来获取选中节点对应的label文本吧~
有人说用getCheckedNodes来获取，我试了一下，只能获取到最后一个节点的信息。不能获取选中的那一组的节点的信息。
然后我在this.$refs[xxx]这个对象里面发现有inputValue 和presentText这两个属性，当触发change事件的时候，我打印这个两个属性都是null, 当第二次触发change事件的时候，才能打印出上一次选择过的那一组节点文本信息。
现在卡在这里了，好难受。

getCheckedNodes返回的node节点里有parent指针，可以获取到所有父节点

[hhli8]

您好，这个改动造成了有一个bug，默认值显示问题，显示不正确，多数据情况下，部分显示不正确

[SimonaliaChen]

您好，这个改动造成了有一个bug，默认值显示问题，显示不正确，多数据情况下，部分显示不正确

麻烦提供相应的Isuue和复现Demo

[dadiyang]

这个更新改变了原有的用户操作习惯，大部分情况下，用户只要点击了就是选中，而不是只为了查看子节点。我们不想改变用户习惯，现在又需要升级，以使用新的组件。

于是，我想出了一个办法：同时监听 expand-change 和 change 事件，然后将 radio 隐藏掉：

一、同时监听 expand-change 和 change 事件，绑定到同一样方法

  <el-cascader :options="biz"
               change-on-select
               v-model="defaultValue"
               @change="change"
               @expand-change="change"
               popper-class="my-cascader-popper">
  </el-cascader>

二、在 methods 中写 change 方法：

 methods: {
      change(val) {
        // 这里手动给 v-model 绑定的值赋值，改变当前选中
        this.defaultValue = val;
        // 这里实现 change 事件的其他逻辑
       ……
      },
}

三、添加全局样式来隐藏 radio：

<style>
  .my-cascader-popper .el-cascader-node .el-radio {
    display: none;
  }
</style>

注意，为了不造成样式污染，我们在 cascade 中设置 popper-class="my-cascader-popper"

这样使用的效果就跟低版本的一样了。

但是如果是叶子结点，则无法展开，也就不能触发 expand-change 事件，所以我们需要给所有的叶子结点再添加一个空结点 ：

{
      value: "",
      label: "",
      leaf: true,
      disabled: true
}

// 如果是懒加载的，则在发现是叶子结点时返回：
resolve([{
                  value: "",
                  label: "",
                  leaf: true,
                  disabled: true
                }]);

像这种大的不兼容升级建议还是要更加谨慎一些，尽量提供向前兼容的选项。特别是这种对用户有感知的升级，更要考虑兼容性问题。

[hmj776521114]

这个改动真的很糟心，加个radio操作起来很混乱，也不兼容以前的change-on-select，以前以element-ui构建的组件没办法升级

同意，想用change-on-select但是看到官方文档里已经没有这个属性了，贼难受

[SKT-Shurima]

• 现在有个需求当用户需要反显数据时，需要设置默认值，这边做法是将数据拼接成字符串，然后设置给 input
• 但是此处感觉有个 element-ui 设计不合理的地方
• https://github.com/ElemeFE/element/blob/dev/packages/cascader/src/cascader.vue#L17
• 在 cascader.vue 第17行，v-model="multiple ? presentText : inputValue"
• 按理说应该是非多选的情况下，el-input 的 v-model 应该是 inputValue
• 但是在 https://github.com/ElemeFE/element/blob/dev/packages/cascader/src/cascader.vue#L416
• handleDropdownLeave 方法中 this.inputValue = this.presentText;
• 那么当弹框消失时，inputValue 被强制换成了 presentText 也就是 null
• 同时在https://github.com/ElemeFE/element/blob/dev/packages/cascader/src/cascader.vue#L336

      presentText(val) {
        this.inputValue = val;
      },

• 也就是说presentText 发生改变之后，会强制改变 inputValue
• 那这样的话，v-model="multiple ? presentText : inputValue"，这段代码的 multiple 的意义何在？？？