Vue 模糊搜索 分页下拉 后台分页

 

<el-select v-model="selected.userId" popper-class="selectJob" size='small' clearable filterable :filter-method="getTableList">
          <el-option v-for="item in selData" :key="item.id" :label="item.username" :value="item.id" >
          <span style="float: left;width:120px" :title="item.username">{{item.username}}</span>
          </el-option>
          <div style="bottom: 0;width: 100%;background: #fff">
                <el-pagination
                        small
                        @size-change="diaSizeChange"
                        @current-change="diaCurrentChange"
                        :current-page.sync="selPage"
                        :total="selTotal"
                        :page-size.sync="selSize"
                        layout="prev, pager,next"
                        >
                </el-pagination>
            </div>
        </el-select>
      selTotal: 0, // 获取总数据量
      selCount: 0, // 获取总页数
      selPage: 1, // 当前页数
      selSize: 50,
      selData: [] // 当前页数数据
    diaSizeChange() {
      this.selPage = 1;
      this.getTableList();
    },
    diaCurrentChange() {
      this.selected.userId = '';
      this.selected.username = '';
      this.getTableList();
    },
getTableList(query = this.selected.userName) {
      const pageSize = this.selSize;
      const pageNo = this.selPage - 1;
      const params = JSON.parse(JSON.stringify({ pageSize, pageNo, userName: query }));
      this.$api.configManagement.getUserList(params).then((res) => {
        this.selData = res.content;
        this.selTotal = res.totalElements;
        this.selCount = res.totalPages;
      }).catch((error) => {
        this.$message.error('~~请求失败');
      });
    },