关于vue中的事件传参 - 默认参数多个的解决方案

438 阅读1分钟

问题: 在最近一个项目中,我需要使用到antDesign中的下拉搜索组件,但是在下拉组件选择某项后,需要有事件处理,根据组件使用,发现默认传参是有两个,我还需要再传两个自己的参数,这样该如何处理呢?

image.png 组件代码如下:

                       <a-select
                          v-model:value="dataItem[child.field]"
                          show-search
                          placeholder="请输入"
                          style="width: 100%"
                          :filter-option="filterDrugOption"
                          :options="drugOptions"
                          @change="handleChange"
                        >
                        </a-select>
                        
                        ……
                        
                        const handleChange = (input: string, option: any) => {
                        return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0; };

简要说明:在这里,show-search属性是搜索功能,data是数据源 在@filterOption事件里面,可以看到默认是有input 和 option两个参数的,这时,我们还想多传其他参数的话,就要用到闭包传参了。

            事件定义:
                        @change="
                            (...val) => {
                              return handleChange(
                                ...val,
                                你的其他参数
                              );
                            }
                          "
            对应事件:
                handleChange(input, option, field, index) {
                  console.log(
                     input,
                    option,
                    '---我的参数---',
                    field,
                    index                  
                    );
                  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
                },
                
                          

这样就可以解决啦!