element-ui中select下拉框添加分页以及更改下拉框高度

在select中加入分页组件就可实现带分页的下拉框，如下图

此下是远程搜索

若在添加远程搜索需要添加以下代码，首先在select中添加以下属性，如上图

filterable
remote
:remote-method="remoteMethod"

然后在方法中这样写

 async remoteMethod(query) {
        console.log(query, 'query')
        if (query !== '') {
          this.queryForm1.truename = query
          this.queryForm1.page = 1
          this.getTeacher()
        } else {
          this.teacherData = []
        }
      },

其中queryForm1是给teacherDate的参数，如下

async getTeacher() {
        const { data } = await getTeacherList(this.queryForm1)
        this.teacherData = data.list
        console.log(this.teacherData, '导师列表')
        // 分页内容
        const { meta } = data
        this.queryForm1.total = meta.pagination.total
      },

在select中添加了一个@focus方法 此方法如下，是为了重置参数，这样可以保证在失焦之后再次聚焦时数据是最全的而不是上次搜索的数据

tea_blur() {
        this.queryForm1 = {
          page: 1,
          per_page: 15,
        }
        this.getTeacher()
      },

此下是修改下拉框样式

更改下拉框高度时需要在select中添加以下代码

:popper-append-to-body="false"
 popper-class="eloption"

然后在css中添加以下代码就可以了

 .eloption .el-select-dropdown__wrap {
    max-height: 100%;
  }