Vue+elementUi选择器远程搜索

Vue+elementUi选择器远程搜索
前端代码：
根据官方给的样例基本照着扒下来
官方地址https://element.eleme.cn/#/zh-CN/component/select
这是我的代码

<el-form-item label="项目负责人" prop="projectLeader">
<el-select v-model="form.projectLeader" filterable remote placeholder="请输入关键词" :remote-method="remoteMethod" >
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</el-form-item>

因为我是用from表单传的数据所以我的v-model=“form.projectName”。
官方给的这几个参数multiple ，filterable ， remote ，reserve-keyword。你自己看你要用哪个。
之后按着官方给的文档

export default {
    data() {
      return {
        options: [],
        value: [],
        list: [],
        loading: false,
        states: []，
}
}

官方的文档里states是有赋值他是为了测试，我们的数据是要从数据库里查出来所以states[]里没有值。
接着官方给的文档

mounted() {
      this.list = this.states.map(item => {
        return { value: `value:${item}`, label: `label:${item}` };
      });
},

按照官方的文档写会有一点问题，在网上看到了一篇文章。
https://www.cnblogs.com/pingguo-softwaretesting/p/14787965.html

computed: {
  listSet() {
    return this.states.map(item => {
      return {value: `${item.userName}`, label: `${item.userName}`};
    });
  },
},

用这段代码代替官方给的文档，这个方法的主要作用是把你传到前端的值写成map的形式，因为select选择器接受信息的格式是

{
  label: "value",
  value: "value",
},

这里的this.states就是你返回到前端的值。你要是不知道返回了什么就在浏览器按f12之后点击Network.找到你调用这个方法的地方就能看到了。
这里的item.userName是你返回到前端的对象数组里内容你想把什么赋给他什么值就在这里赋给label与value,label就是你要展示的标签的名称，value是你要存的值。
前端页面的最后一步

remoteMethod(query) {
  if (query !== '') {
    this.loading = true;
    treeselect().then(response => {
      this.states  = response.rows;
    });

    setTimeout(() => {
      this.loading = false;
      this.options = this.listSet.filter(item => {
        return item.label.toLowerCase()
          .indexOf(query.toLowerCase()) > -1;
      });
    }, 200);
  } else {
    this.options = [];
  }
},

remoteMethod就是你的这个方法名，treeselect()就是你给后端的接口它的返回值就是你查到的内容。之后把返回值赋给states。
我的API是分开写的，在前端别忘了在import里导入

Js

export function treeselect() {
  return request({
    url: '/report/upstreaminfo/treeselect',
    method: 'get'
  })
}

url就是你给后端的接口
这样前端基本上就完成了。
前端的基本思想就是，从后端拿到了想要显示在下拉列表的值，把值赋给states[],之后在通过listset方法改变states的格式。
后端代码
在controller里写

@PreAuthorize("@ss.hasPermi('report:upstreaminfo:query')")
@GetMapping(value = "/treeselect")
public TableDataInfo treeselect(User user)
{
    List<User> users = tUpstreamInfoService.selectUserList(user);
    return getDataTable(users);

}

User就是你接收的实体
Service

public List<User> selectUserList(User user);

impl

public List<User> selectUserList(User user) {
    return tUpstreamInfoMapper.selectUserList(user);
}

mapper

public List<User> selectUserList(User user);

xml

<select id="selectUserList" parameterType="User" resultMap="UserResult">
    select user_name from sys_user
</select>