使用饿了么组件的下拉框的可搜索,并且要可以输入中文和数字搜索

先使用正则判断输入的是数字还是中文,然后发送请求

          <el-select
              v-model="model.cinemaIds"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入影院名称"
              :remote-method="remoteMethod"
              :loading="loading"
            >
              <el-option
                v-for="item in cinemaOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <span style="float: left">{{ item.name }}</span>
                <span
                  style="
                    float: right;
                    color: #8492a6;
                    font-size: 13px;
                    padding-right: 20px;
                  "
                  >{{ item.zzCode }}</span
                >
              </el-option>
            </el-select>
    async remoteMethod(query) {
      if (query !== '') {
        if (/[\u4e00-\u9fa5]/.test(query)) {
          const res = await getCinemaList({
            pageNum: 1,
            cinemaName: query
            // zzCode: query
          });
          this.loading = true;
          this.cinemaOptions = [];
          for (const item of res.data.list) {
            this.cinemaOptions.push({
              label: item.name,
              value: item.id
              zzCode:item.zzCode
            });
          }
          this.loading = false;
        } else {
          const res = await getCinemaList({
            pageNum: 1,
            zzCode: query
          });
          this.loading = true;
          this.cinemaOptions = [];
          for (const item of res.data.list) {
            this.cinemaOptions.push({
              label: item.name,
              value: item.id
              zzCode:item.zzCode
            });
          }
          this.loading = false;
        }
      } else {
        this.cinemaOptions = [];
      }
    },```

posted @ 2022-02-15 09:35  喜欢Tb  阅读(82)  评论(0)    收藏  举报  来源