el-select / el-autocomplete下拉列表

el-select

filterable属性模糊搜索功能

                  
                    
                     //下拉框展示,左侧显示姓名,右侧显示手机号
                      {{ item.patientName }}
                      {{ item.patientPhone }}  
                    
                  


: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

      
        
      

选中时输入框中的值

    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;
        })
      },

你可能感兴趣的:(el-select / el-autocomplete下拉列表)