Vue 中使用 ElementUI 中的 el-select 中的remote-method 如何添加自定义方法？

最新推荐文章于 2025-06-17 15:26:08 发布

凌珞

最新推荐文章于 2025-06-17 15:26:08 发布

阅读量1w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： ElementUI VUE

本文链接：https://blog.csdn.net/dyp330/article/details/113444234

本文介绍了如何在Vue项目中使用ElementUI的el-select组件进行远程搜索，并添加自定义参数。通过`:remote-method="(val) => getBrand(val, scope.row)"`的方式，利用闭包和箭头函数将表格当前行(row)的数据传入远程方法，实现了在el-table列中使用el-select组件并传递自定义参数的需求。" 132648687,19694862,Android平台交叉编译OCCT库C/C++实战,"['Android开发', 'C/C++', '移动开发', '开源库', '几何处理']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先认为大家都知道 el-select 组件可以支持远程搜索，官网代码 https://element.eleme.cn/#/zh-CN/component/select ，不知道的朋友自行学习哦！

el-select 组件支持远程搜索有一个 :remote-method="remoteMethod" 这个方法（官网有代码内容），但是如果需要在单独传一个自定义参数，怎么办呢？

需求：把组件放在了 el-table的列中需要把 row的数据传递进去，实现如下：

:remote-method="(val)=>getBrand(val, scope.row)" （scope.row 是表格的插槽）是不是很简单，就一句话，不要小看这句话哦，实现原理包括了闭包和箭头函数。

下面代码举个栗子：

<template> 
    <div>
        <el-select v-model="brandId" filterable remote placeholder="请输入品牌"
              :remote-method="(val)=>getBrand(val, "测试数据")" clearable>
               <el-option v-for="item in brandList" :key="item.id" :label="item.name"
                 :value="item.id"> 
               </el-option>
        </el-select>
    </div>
</temp