element 输入框检索

最新推荐文章于 2024-07-16 11:07:16 发布

每天发布一篇原创

最新推荐文章于 2024-07-16 11:07:16 发布

阅读量385

点赞数

分类专栏： element ui 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_26728817/article/details/116011975

版权

element ui 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍如何在Vue应用中使用el-autocomplete组件，通过value-key设置和fetch-suggestions方法实现实时单位名称检索。重点讲解了querySearchDwmc和unifiedSearch封装函数的作用，以及如何配合create_jf_dwmc方法进行精确匹配。

摘要由CSDN通过智能技术生成

<el-autocomplete placeholder="请输入单位名称" value-key="COMPANY_NAME" v-model="search_tj.dwmc" clearable :fetch-suggestions="querySearchDwmc"   @select="handleSelect_dwmc"></el-autocomplete>

value-key 是你要检索的字段名称
fetch-suggestions 你输入你要检索文字触发的方法
select 选择检索文字的事件

     //用户输入两位开始检索
        querySearchDwmc(queryString, cb) {
          if(queryString.length >1){
            this.search_tj.dwmc=queryString
            //调用查询方法
            this.query(queryString, cb)
          }else{
            this.$message({
              message: '至少输入两位',
              type: 'warning',
            })
          } 
      },
      //query方法内部调用  使用方法：unifiedSearch(queryString, cb,that.tableData,vm.create_jf_dwmc)
       create_jf_dwmc(queryString) {
        return (state) => {
          return (state.COMPANY_NAME.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
        };
      },

unifiedSearch封装方法

// 封装统一检索方法
// data_name 是全部的数据
//methods_name 是请求的方法
function unifiedSearch(queryString, cb,data_name,methods_name){
  console.log(queryString)
  var restaurants = data_name;
        var results = queryString ? restaurants.filter(methods_name(queryString)) : restaurants;
        clearTimeout(vm.timeout);
        vm.timeout = setTimeout(() => {
          cb(results);
        }, 500 * Math.random());
}