vue3.0中使用Element-Plus中Select下的filter-method属性代码示例

 更新时间:2023年12月19日 11:30:20   作者:他在时间门外  
这篇文章主要给大家介绍了关于vue3.0中使用Element-Plus中Select下的filter-method属性的相关资料,Filter-method用法是指从一组数据中选择满足条件的项,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下

基本使用

我们都知道Element-PlusSelect有个很好用的属性是filterable,在Select中添加即可使用,他会开启一个搜索功能

自定义查询或者获取下拉框输入值

当我们不想使用它默认的搜索方式,或者获取到下拉框中输入的值时,我们就可以使用filter-method来实现,注意使用filterable后在使用filter-method的话filterable会失效,但是不加上filterable下拉框会输入不了值,所以还是要搭配使用

下拉框:

 <el-select
                  v-model="form.outTruckId"
                  placeholder=" "
                  filterable
                  clearable
                  :filter-method="outTruckinput"
                  @clear="outclear"
                  v-if="scope.row.action == 'edit'"
                >
                  <el-option
                    v-for="item in OutTruckOptionList"
                    :key="item.keyCode"
                    :label="item.valueCode"
                    :value="item.keyCode"
                  />
                </el-select>

函数

// 获取下拉框的输入值
function outTruckinput(e) {
  // 自定义查询方法
  let list = ref();
  list.value = OutTruckOptionList.value;

  if (e) {
    OutTruckOptionList.value = list.value.filter((item) => {
      return item.valueCode.indexOf(e) > -1;
    });
  } else {
    //刷新下拉列表
    console.log("刷新下拉列表,重新给OutTruckOptionList.value赋值");
  }
}

总结 

到此这篇关于vue3.0中使用Element-Plus中Select下的filter-method属性的文章就介绍到这了,更多相关Select下filter-method属性使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue插件及修改ip启动端口解析

    vue插件及修改ip启动端口解析

    这篇文章主要为大家介绍了vue插件及修改ip启动端口的解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-04-04
  • 浅谈vue项目可以从哪些方面进行优化

    浅谈vue项目可以从哪些方面进行优化

    本篇文章主要介绍了浅谈vue项目可以从哪些方面进行优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)

    Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)

    下面小编就为大家带来一篇Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue实现的封装全局filter并统一管理操作示例

    vue实现的封装全局filter并统一管理操作示例

    这篇文章主要介绍了vue实现的封装全局filter并统一管理操作,结合实例形式详细分析了vue封装全局filter及相关使用技巧,需要的朋友可以参考下
    2020-02-02
  • VSCode使用之Vue工程配置eslint

    VSCode使用之Vue工程配置eslint

    这篇文章主要介绍了VSCode使用之Vue工程配置eslint,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • 老生常谈Vue中的侦听器watch

    老生常谈Vue中的侦听器watch

    开发中我们在data返回的对象中定义了数据,这个数据通过插值语法等方式绑定到template中,这篇文章主要介绍了Vue中的侦听器watch,需要的朋友可以参考下
    2022-10-10
  • vue  composition-api 封装组合式函数的操作方法

    vue  composition-api 封装组合式函数的操作方法

    在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数,这篇文章主要介绍了vue  composition-api 封装组合式函数的操作方法,需要的朋友可以参考下
    2022-10-10
  • vue实现登录、注册、退出、跳转等功能

    vue实现登录、注册、退出、跳转等功能

    这篇文章主要介绍了vue实现登录、注册、退出、跳转等功能,需要的朋友可以参考下
    2020-12-12
  • 基于Vue实现图书管理功能

    基于Vue实现图书管理功能

    这篇文章主要为大家详细介绍了基于Vue实现图书管理功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 通过一个简单的例子学会vuex与模块化

    通过一个简单的例子学会vuex与模块化

    这篇文章主要给大家介绍了关于如何通过一个简单的例子学会vuex与模块化的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11

最新评论