VUE下拉搜索分页

组件

<template>
  <el-select
    :size="size"
    v-model="value"
    @change="handleChange">
    <div v-loading="loading">
      <el-input
        class="select-input"
        :size="size"
        prefix-icon="el-icon-search"
        :placeholder="placeholder"
        v-model="filterText"
        @change="handleFilter">
      </el-input>
      <el-option
        value=""
        label="全部" />
      <el-option
        v-for="o in options"
        :key="o[value]"
        :label="o[props.label]"
        :value="o[props.value]" />
      <el-pagination
        v-if="pagination.show"
        class="mt12 w100 base select-pagination"
        @current-change="handleCurrentChange"
        :current-page.sync="pagination.pageNum"
        :page-size="pagination.pageSize"
        :layout="pagination.layout"
        :total="pagination.total" />
      <p v-if="pagination.show" class="page-size">10条/页</p>
    </div>
  </el-select>
</template>

<script>
export default {
  props: {
    props: {
      type: Object,
      default: () => ({
        label: 'label',
        value: 'value',
      }),
    },
    options: {
      type: Array,
      default: () => [],
    },
    placeholder: {
      type: String,
      default: '用户昵称',
    },
    size: {
      type: String,
      default: 'small',
    },
    pagination: {
      type: Object,
      default: () => ({
        show: true,
        pageNum: 1,
        pageSize: 10,
        total: 0,
        layout: 'prev, next',
      }),
    },
    loading: {
      type: Boolean,
      default: false,
    },
    value:{
       type: String
    }
  },
  data() {
    return {
      value: '',
      filterText: '',
    };
  },
  mounted() {
  },
  methods: {
    // 初始化数据
    initData() {
      this.value = '';
      this.filterText = '';
    },
    // 切换页码
    handleCurrentChange() {
      this.$emit('getOptions');
    },
    // 切换选项
    handleChange() {
      this.$emit('selectValue', this.value);
    },
    // 筛选选项
    handleFilter() {
      this.$emit('getOptions', this.filterText);
    },
  },
};
</script>

<style lang="scss" scoped>
  .select-input{
    padding: 0 12px;
    box-sizing: border-box;
    margin-bottom: 12px;
    ::v-deep .el-input__inner {
      border: none;
      border-bottom: 1px solid #EBEBEB;
      border-radius: 0;
    }
  }
  .select-pagination {
    text-align: center;
    ::v-deep .btn-prev {
      padding-right: 30px;
      .el-icon::before {
        content: "\e792",
      }
    }
    ::v-deep .btn-next {
      padding-left: 30px;
      .el-icon::before {
        content: "\e791",
      }
    }
  }
  .page-size {
    color: #FFFFFF;
    font-size: 12px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    margin-top: -32px;
  }
</style>

全局注册组件

// 搜索分页加载
import PaginationSelect from '@/components/SearchInput'
Vue.component('PaginationSelect', PaginationSelect)

调用组件

  <el-table-column label="管理员" align="center" prop="adminId">
              <template slot-scope="scope">
                <span
                  v-for="(item, index) in adminAllData"
                  :key="index"
                  :value="item.value"
                  v-if="scope.row.adminId == item.value"
                >
                  {{ item.label }}
                </span>
              
              </template>
        </el-table-column> 


data() {
    return {
      optionList: [],
      pagination: {
          show: true,
        pageNum: 1,
        pageSize: 2,
        total: 0,
        layout: 'prev, next',
      },
      loading:'',
      value:''
    }
}  
 methods: {
   // 分页请求下拉选项
    getOptionList(keyword) {
      this.optionList=[];
      this.loading = true
      const { pageNum, pageSize } = this.pagination
      const params = {
          keyword,
        pageNum,
           pageSize,
      };
      getUserInfo(params).then(response => {
        response.rows.forEach((v,k) => {
          //下拉列表数据源绑定
           this.optionList.push({
            label:v.userName,
            value:v.userId
          })
        });
        this.pagination.total = response.total;
      }).finally(() => {
          this.loading = false
      })
    },
    // 选中下拉选项
    selectData(val) {
      this.form.adminId = val;
    }
}