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

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

          <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 @   喜欢Tb  阅读(45)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)

阅读目录(Content)

此页目录为空

点击右上角即可分享
微信分享提示