el-select

filterable属性模糊搜索功能

                  <el-select
                    v-model="inquiry.patientName"   //下拉框绑定的值
                    v-loadmore="psrAddEnquiryVoUserLoadmore"     //下拉显示更多数据（分页）
                    filterable
                    :filter-method="searchPsrAddEnquiryVo"
                    @change="selectPsrAddEnquiryVoItem"
                  >
                    <el-option
                      v-for="(item, index) in psrAddEnquiryVoUser.user_list"
                      :key="index"
                      :label="item.patientName"
                      :value="item.patientName"
                    >
                     //下拉框展示，左侧显示姓名，右侧显示手机号
                      <span style="float: left">{{ item.patientName }}</span>
                      <span
                        style="float: right; color: #8492a6; font-size: 13px"
                      >{{ item.patientPhone }}</span>  
                    </el-option>
                  </el-select>

:filter-method 绑定filter方法它会在输入值发生变化时调用，参数为当前输入值。

   searchPsrAddEnquiryVo(patientName) {
      this.psrAddEnquiryVoUser.pageNo = 1
      this.psrAddEnquiryVoUser.user_list = []
      this.psrAddEnquiryVoUser.patientName = patientName   //对输入框进行模糊搜索
      this.psrAddEnquiryVoUserGetUserList()
    },

选中后进行事件回调，过滤想要响应在输入框中的name

 selectPsrAddEnquiryVoItem(name) {
      const trsaction_arr = t this.psrAddEnquiryVoUser.filter(item => item.name === name)[0];
      this.pms_spu_id=trsaction_arr.id
      console.log("this.search_spu_list", this.pms_spu_id);
      this.getPmsInfo();   //调接口方法
      },

el-autocomplete

      <el-form-item label="商品编码" prop="goodsSku">
        <el-autocomplete
          class="inline-input"
          v-model="goods_sn"
          :fetch-suggestions="querySearch"
          placeholder="请输入编码"
          @select="handleSelect"
          style="width: 100% padding-right:30px;"
        ></el-autocomplete>
      </el-form-item>

选中时输入框中的值

    handleSelect(item) {
        let goodsValue=item.value
        let skuCode=goodsValue.split('——')
        console.log("商品编码",item);
        this.goods_sn =skuCode[0];
        this.getPmsSkuBySn();
      },
    getPmsSkuBySn() {
        window._api.adminPortalPmsSkuGetBySn({
          sn: this.goods_sn
        }).then(res => {
          this.form.goodsName = res.data.pms_spu.name;
          this.form.goodsSku = res.data.name;
          this.form.goodsImg = res.data.img;
          this.goodsInfo = res.data;
        })
      },