Vue+elementUi selector remote search
Front end code:
According to the example given by the official, basically pick it up
Official address https://element.eleme.cn/#/zh-CN/component/select
This is my code

<el-form-item label="Project Leader" prop="projectLeader">
<el-select v-model="form.projectLeader" filterable remote placeholder="Please enter keywords" :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>

Because I use the data transmitted from form, my v-model = "form.projectName".
The official parameters are multiple, filterable, remote and reserve keyword. See for yourself which one you want to use.
Then according to the official documents

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

There is a value assigned to states in the official document for testing. Our data is to be found from the database, so there is no value in states [].
Then the official documents

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

There will be a problem writing according to the official documents. I saw an article on the Internet.
https://www.cnblogs.com/pingguo-softwaretesting/p/14787965.html

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

Replace the official document with this code. The main function of this method is to write the value you sent to the front end in the form of map, because the format of the information received by the select selector is

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

Here's this States is the value you return to the front end. If you don't know what to return, press f12 in the browser and click Network Find where you call this method and you'll see it.
Here is the item Username is the content of the object array you returned to the front end. What you want to assign to it and what value you want to assign to it are here assigned to label and value. Label is the name of the label you want to display, and value is the value you want to save.
The last step of the front page

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 is your method name, treeselect() is the interface you give to the back end, and its return value is what you find. Then assign the return value to states.
My API is written separately. On the front end, don't forget to import it in import

Js

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

The url is the interface you give to the backend
In this way, the front end is basically completed.
The basic idea of the front end is to get the value to be displayed in the drop-down list from the back end, assign the value to states [], and then change the format of states through the listset method.
Back end code
Write in 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 is the entity you receive
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>