1、我这里的功能要求为：可以一次性多新增多个人员并且需要有模糊查询功能。
<el-selectv-model="form.userId"multiplefilterableremotereserve-keywordplaceholder="请输入关键词":remote-method="remoteMethod":loading="loading"@change="handleSelectBranchCom"><el-optionv-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);},// 拿到IdhandleSelectBranchCom(item) {this.userId = item;},
