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左右侧联动滚动的实现代码

    vue左右侧联动滚动的实现代码

    这篇文章主要介绍了vue左右侧联动滚动的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Vue组件开发初探

    Vue组件开发初探

    本篇文章主要介绍了Vue组件开发初探,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • vue如何实现Json格式数据展示

    vue如何实现Json格式数据展示

    这篇文章主要介绍了vue如何实现Json格式数据展示,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作

    vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作

    这篇文章主要介绍了vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • Vue中的MVVM模式使用及说明

    Vue中的MVVM模式使用及说明

    这篇文章主要介绍了Vue中的MVVM模式使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vuepress打包之后页面样式丢失问题的两种解决方式

    vuepress打包之后页面样式丢失问题的两种解决方式

    这篇文章主要介绍了vuepress打包之后页面样式丢失问题的两种解决方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vite打包部署图标偶尔乱码的问题及解决过程

    vite打包部署图标偶尔乱码的问题及解决过程

    文章介绍了在使用Vite+Vue3项目打包时遇到的自定义图标偶尔乱码问题的解决方法,通过研究vite.config.js的配置项,发现将cssMinify设置为false可以解决图标乱码问题,同时并不会显著增加打包文件的大小
    2025-12-12
  • Vue3新状态管理工具实例详解

    Vue3新状态管理工具实例详解

    Vue3公布曾经有一段时间了,它采纳了新的响应式零碎,而且构建了一套全新的 Composition API,下面这篇文章主要给大家介绍了关于Vue3新状态管理工具的相关资料,需要的朋友可以参考下
    2022-03-03
  • 解决vue路由组件vue-router实例被复用问题

    解决vue路由组件vue-router实例被复用问题

    这篇文章介绍了解决vue路由组件vue-router实例被复用的问题,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • vue定义模态框的方法

    vue定义模态框的方法

    这篇文章主要为大家详细介绍了vue定义模态框的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论