Vue使用element-ul输入框input模糊查询加多选功能

妄想症_患者

已于 2023-03-13 11:34:33 修改

阅读量974

点赞数 1

文章标签： vue.js javascript elementui

于 2023-03-13 11:30:01 首次发布

本文链接：https://blog.csdn.net/Socialcoarseness/article/details/129489021

版权

1、我这里的功能要求为：可以一次性多新增多个人员并且需要有模糊查询功能。

            <el-select
                v-model="form.userId"
                multiple
                filterable
                remote
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                :loading="loading"
                @change="handleSelectBranchCom"
              >
                <el-option
                  v-for="item in staffUserList"
                  :key="item.value"
                  :label="item.label"
                  style="height: 30px"
                  :value="item.value"
                >
                </el-option>
              </el-select>

data() {
    return{
        staffUserList: [],
        states: "",
        list: "",   
    }
}

2、我这里点击新增按钮的时候会一开始查询所有。

    // 点击新增查询一次所有人员
    handleAdd() {
      listStaffUser().then((res)=> {
        this.states = res.rows;
        this.list = this.states.map((item) => {
            return { value: item.userId, label: item.nickName };
        });
        this.staffUserList = this.list;
      })
      this.open = true;
      this.title = "添加巡检人员";
      this.reset();
    },
    
    // 参数发生变化调用模糊查询
    remoteMethod(query) {
      var that = this;
      listStaffUser({
        params: {
          comName: query, //请求的参数  输入的值
        },
      })
        .then(function (res) {
          //将取到的值进行遍历
          that.states = res.rows;
          that.list = that.states.map((item) => {
            // item.userId item.nickName 根据接口里的关键字
            return { value: item.userId, label: item.nickName };
          });
        })
        .catch(function (err) {
          console.log(err);
        });
      setTimeout(() => {
        if (query !== "") {
          that.loading = true;
          setTimeout(() => {
            that.loading = false;
            that.staffUserList = that.list.filter((item) => {
              //这里的label值对应着 上面遍历 return  返回的label:item.nickName 
              return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          that.staffUserList = that.list;
        }
      }, 100);
    },
    // 拿到Id
    handleSelectBranchCom(item) {
      this.userId = item;
    },