• element ui input模糊搜索


    1.template中

    <el-autocomplete
       class="inline-input"
       v-model="formInline.rotaPlanName"
       :fetch-suggestions="querySearch"
       placeholder="请输入设备名称"
       :trigger-on-focus="false"
       @select="handleSelect"
     ></el-autocomplete>

    2.methods中

       要将获取到得json格式处理成模糊搜索支持的格式

    data = data.map((item) => {
              return {
                name: item.equipId,
                value: item.equipName,
              };
            });
    this.equipInstArr = data;

    绑定组件的两个方法

    querySearch(queryString, cb) {
          var equipInstArr = this.equipInstArr;
          // console.log("equipInstArr", equipInstArr);
    
          var results = queryString
            ? equipInstArr.filter(this.createFilter(queryString))
            : equipInstArr;
          console.log(results);
          // 调用 callback 返回建议列表的数据
          cb(results);
        },
    createFilter(queryString) {
          return (equipInstArr) => {
            return (
              equipInstArr.value
                .toLowerCase()
                .indexOf(queryString.toLowerCase()) === 0
            );
          };
        },

    这样就ok

  • 相关阅读:
    冲刺周期会议三
    冲刺周期会议二
    冲刺周期会议一
    日常会议
    总结会议及站立会议(六)
    站立会议(五)
    站立会议(四)
    【自习任我行】
    软件小创意
    团队项目题目拟定
  • 原文地址:https://www.cnblogs.com/lq2333/p/15189675.html
Copyright © 2020-2023  润新知