Element: [Feature Request] Cascader change event add whole options data params

Created on 21 Jun 2019 · 19Comments · Source: ElemeFE/element

Existing Component

是

Component Name

Cascader

Description

背景：我们在使用 Cascader 组件时，通过 lazyload 方法获取数据，在 change 事件中，期望可以对源数据进行遍历得到其他需要的字段数据。

现状：在 change 事件中，可以获取到节点的 id，此时我们期望通过 id 去遍历源数据得到一些其他字段，如 name 等，但是对于 lazyload 获取的数据不是直接写入 options 的，看了下源码好像是在 vuex 内自己维护了一套数据，并且没有提供方式来获取。期望能在 change 事件中将完整数据暴露出来，方便获取其他内容。

Source

6ml

Most helpful comment

@6ml 第一个参数不变，加一个参数返回完整数据

luckyCao on 10 Jul 2019

👍2

All 19 comments

Translation of this issue:

Existing Component

yes

Component Name

Cascader

Description

Background: When using Cascader components, we obtain data through lazyload method. In the change event, we expect that we can traverse the source data to get other required field data.

Status: In the change event, the ID of the node can be obtained. At this time, we expect to traverse the source data through the ID to get some other fields, such as name, etc. But for lazyload, the data obtained is not directly written to options. Looking at the source code, it seems that it maintains a set of data in vuex and does not provide a way to obtain it. It is expected that the complete data can be exposed in the change event to facilitate access to other content.

element-bot on 21 Jun 2019

superpig on 21 Jun 2019

Whisky-Zuo on 24 Jun 2019

希望 lazyload 获取的数据能直接写入 options 里，交给用户自己来维护，一劳永逸，因为会涉及到默认显示，在做表单编辑之类操作的时候，则没办法设置默认显示内容。

hooray on 2 Jul 2019

@6ml
看下面例子，当选择「西湖」的时候，目前 change 的回调入参是 ['zhejiang', 'hangzhou', 'xihu']
你是想要什么数据结构呢？类似下面这样的？
[{ value: 'zhejiang', label: '浙江'}, { value: 'hangzhou', label: '杭州'}, { value: 'xihu', label: '西湖'} ]

<template>
 <el-cascader :options="options" @change="handleChange"></el-cascader>
</template>

<script>
const options = {
  value: 'zhejiang',
  label: '浙江',
  options: children: [{
    value: 'hangzhou',
    label: '杭州',
    children: [{
      value: 'xihu',
      label: '西湖'
    }, {
      value: 'binjiang',
      label: '滨江'
    }]
  }
export default {
  data(){
    options: options
  },
  methods: {
    handleChange(value){
       console.log(value)
    }
}
</script>

luckyCao on 4 Jul 2019

@luckyCao 在普通模式下，change 返回 ['zhejiang', 'hangzhou', 'xihu'] 并无太大问题，大不了自己去 options 里遍历一遍获取想要的数据。
可在开启 lazy ，通过 lazyload 去动态获取数据时，options 是不需要传入的（传入也不起作用），Cascader 内部有在维护一组 options 的数据，并且不对外暴露，才导致了楼主的问题，当然我的建议是能将 options 的数据暴露出来，由开发者来维护，也方便做数据回显（比如设置默认值）

hooray on 5 Jul 2019

@hooray 返回 [{ value: 'zhejiang', label: '浙江'}, { value: 'hangzhou', label: '杭州'}, { value: 'xihu', label: '西湖'} ] 这样的选中的完整数据满足要求吗？

luckyCao on 5 Jul 2019

@luckyCao 可以满足 @6ml 的需求，不过我的诉求是另外一个问题，就是希望 options 能暴露出来，可以让我来维护，在官方示例里，如果开启 lazy 后，同时再手动设置 options 是不生效的。
因为需要做数据回显，比如初始状态的默认值是['zhejiang', 'hangzhou', 'xihu']，这种情况下目前是无法在 Cascader 组件上显示出默认值的，我能想到的办法就是把 options 暴露出来，起码我可以通过默认值把对应的 options 数据给提前准备好，用于做数据回显。
或者说在设置了默认值时，Cascader 组件内能自动依次触发 lazyLoad 把 options 数据填充满，这样就再好不过了，直接解决了动态加载时数据回显的问题，也不需要我来做特殊处理了。

下面这是动态加载示例里设置默认值无法正常做数据回显的一份伪代码，可以参考：

<el-cascader v-model="value" :props="props"></el-cascader>

<script>
  export default {
    data() {
      return {
        value: ['zhejiang', 'hangzhou', 'xihu']
        props: {
          lazy: true,
          lazyLoad (node, resolve) {
            ...
            ...
            ...
            resolve(nodes);
          }
        }
      };
    }
  };
</script>

hooray on 5 Jul 2019

@luckyCao 直接返回完整数据是可以满足此次需求的，但是直接改变change事件出参数据结构可能带来的是一次 break change，也许对于多数用户来说是没有必要的。期望如 @hooray 所说，直接将 options 暴露出来，由用户自己取舍，需要额外数据自行遍历即可，直接写入 options 或者在change内增加一个参数来暴露完整数据 ~

6ml on 7 Jul 2019

👍2

@6ml 第一个参数不变，加一个参数返回完整数据

luckyCao on 10 Jul 2019

👍2

@luckyCao 可以满足 @6ml 的需求，不过我的诉求是另外一个问题，就是希望 options 能暴露出来，可以让我来维护，在官方示例里，如果开启 lazy 后，同时再手动设置 options 是不生效的。
因为需要做数据回显，比如初始状态的默认值是['zhejiang', 'hangzhou', 'xihu']，这种情况下目前是无法在 Cascader 组件上显示出默认值的，我能想到的办法就是把 options 暴露出来，起码我可以通过默认值把对应的 options 数据给提前准备好，用于做数据回显。
或者说在设置了默认值时，Cascader 组件内能自动依次触发 lazyLoad 把 options 数据填充满，这样就再好不过了，直接解决了动态加载时数据回显的问题，也不需要我来做特殊处理了。

下面这是动态加载示例里设置默认值无法正常做数据回显的一份伪代码，可以参考：
<el-cascader v-model="value" :props="props"></el-cascader>

<script>
  export default {
    data() {
      return {
        value: ['zhejiang', 'hangzhou', 'xihu']
        props: {
          lazy: true,
          lazyLoad (node, resolve) {
            ...
            ...
            ...
            resolve(nodes);
          }
        }
      };
    }
  };
</script>