封装一个select下拉分页组件

当下拉数据过多，不仅会导致网络请求慢，就算加载出来看着也不方便，太长太长啦，这时候就用到下拉分页组件了

子组件 template 部分

<template>
  <el-row>
    <el-col :span="24">
      <el-select
        v-model="selectVal"
        filterable
        clearable
        remote
        reserve-keyword
        :remote-method="remoteMethod"
        placeholder="请选择"
        @change="changeValue"
        :style="'width:100%'"
      >
        <el-option
          v-for="(item, index) in dataList"
          :key="item.id"
          :label="item[selectLabel]"
          :value="index"
        >
        </el-option>
        <el-col :span="24">
          <div class="page-bottom">
            <!--翻页改变方法 分页组件 pageNum页数，pageSize每页显示数量，total总数-->
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page="this.entityPageInfo.pageNum"
              :page-size="this.entityPageInfo.pageSize"
              layout="total, prev, pager, next"
              :total="this.entityPageInfo.total"
            />
          </div>
        </el-col>
      </el-select>
    </el-col>
  </el-row>
</template>

JS部分

<script>
  import request from '@/utils/request'

  export default {
    name: "SelectPage",
    //接收参数
    props: {
      //请求地址
      getUrl: {
        type: Object,
        require: true
      },
      //el-option label展示字段名
      selectLabel: {
        type: String,
        default: ''
      },
      selectValue: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        selectVal: '',
        dataList: [],
        entityPageInfo: this.getUrl.params,
        list: [],
        loading: false,
        // 检索字段 选择字段
        searchField: '',
        // 检索内容
        searchName: '',
      };
    },
    methods: {
      // 列表
      getList() {
        // 父页面传过来的检索字段
        this.searchField = this.getUrl.searchName
        let options = {
          url: this.getUrl.url,
          method: this.getUrl.method,
          params: {
            pageNum: this.getUrl.params.pageNum,
            pageSize: this.getUrl.params.pageSize,
            // 父页面传过来的检索字段
            [this.searchField]: this.searchName
          }
        }
        //this.getUrl 父组件接收的接口地址 利于不同页面灵活使用
        return request(options).then((res) => {
          this.dataList = res.rows
          this.entityPageInfo.total = res.total;
        })
      },
      //翻页
      handleCurrentChange(val) {
        //val获取点击页数，赋值刷新接口数据
        this.entityPageInfo.pageNum = val;
        this.getList();
      },
      // 选择
      changeValue(e) {
        let data = this.dataList[e]
        //e获取选择code 给父页面
        this.$emit('selectPageChange', data);
      },
      // 远程搜索方法
      remoteMethod(query) {
        this.loading = true;
        // 远程搜索输入框内容
        this.searchName = query
        if (query !== '') {
          this.entityPageInfo.pageNum = 1;
          this.getList();
          this.loading = false;
        } else {
          this.getList();
          this.$forceUpdate();
        }
      },
      // 父页面回显
      echoValue() {
        if (this.selectValue) {
          this.selectVal = this.selectValue;
        }
      },
      //清空select
      reset() {
        this.dataList = []
        this.selectVal = ''
        this.searchName = ''
        this.list = []
      },
    }
  };
</script>
<style scoped>
  .page-bottom {
    display: flex;
    margin-bottom: 10px
  }
</style>

父页面使用

<template>
<select-page
  ref="newPageSelect"
  @selectPageChange="selectPageChange"
  :getUrl="getUrl"
  :selectLabel="serialNumber"
  :selectValue="selectValue"
/>
</template>
// 导入并注册组件
import SelectPage from '@组件路径'
components: {SelectPage},
data() {
    return {
        //传给子组件的参数
        getUrl: {
          url: '',
          method: 'get',
          // 检索的字段
          searchName: 'name',
          //分页所需参数
          params: {
            pageNum: 1,
            pageSize: 10,
          },
        },
        //动态设置 el-option展示的字段名
        serialNumber: 'name',
        selectValue: ''
    }
}

接着在方法里设置后端路径 调用子组件方法

getList() {
  this.getUrl.url = `接口` // 可添加条件取决于后端接口
  setTimeout(() => {
     // 调用子组件的list方法
    this.$refs.newPageSelect.getList();
  }, 200)
},
// 回调方法赋值
selectPageChange(e) {
  this.form.name = e.name;
},

这样就大功告成了，并支持远程搜索，看着舒服多了