Vue+ElementUI 封装简易PaginationSelect组件

在实际开发工作中，经常会碰到当select下拉数据过需要做分页的情况
这里简单介绍封装的一个Pagination-Select组件几个步骤
封装的比较简易，可以根据自己的项目进行改动

1. /components/Pagination-Select/index.vue

<template>   <div id="PaginationSelect">      <el-select       v-model="value"       :placeholder="selectOptions.placeholder"       :filterable="selectOptions.filterable"       :size="selectOptions.size"       :collapse-tags="selectOptions.collapseTags"       :multiple="selectOptions.multiple"       :clearable="selectOptions.clearable"       @change="selectChange">       <el-option         v-for="item in (selectOptions.selectData).slice((selectPage.currentPage - 1) * selectPage.pageSize, selectPage.currentPage * selectPage.pageSize)"         :key="item.value"         :label="item.label"         :value="item.value">       </el-option>       <el-pagination         @size-change="handleSizeChange"         @current-change="handleCurrentChange"         :current-page="selectPage.currentPage"         layout="prev, pager, next"         :page-size="selectPage.pageSize"         :total="selectOptions.selectData.length">       </el-pagination>     </el-select>   </div> </template>  <script> export default {   name: 'PaginationSelect',   props: {     selectOptions: {       type: Object,       default: () => {}     }   },   data () {     return {       selectPage: {         currentPage: 1,         pageSize: 3       },       value: ''     }   },   methods: {     selectChange (val) {       this.$emit('getSelectVal', val)     },     handleSizeChange (val) {       this.selectPage.pageSize = val     },     handleCurrentChange (val) {       this.selectPage.currentPage = val     }   } } </script>  <style lang="less"> .el-pagination {   display: flex;   justify-content: center; } </style> 

2. demo项目，这边直接放在App.vue中使用

<template>   <div id="app">     <Pagination-Select :selectOptions="selectOptions" @getSelectVal="getSelectVal" />   </div> </template>  <script> import PaginationSelect from './components/Pagination-Select' export default {   name: 'App',   components: { PaginationSelect },   data () {     return {       // select组件配置项       selectOptions: {         filterable: true,         clearable: true,         placeholder: '请选择aaa',         size: 'small',         multiple: false,         collapseTags: false,         selectData: []       }     }   },   created () {     this.querySelectData()   },   methods: {     querySelectData () {       setTimeout(() => {         this.selectOptions.selectData = [           {             value: '1',             label: '黄金糕'           },           {             value: '2',             label: '双皮奶'           },           {             value: '3',             label: '蚵仔煎'           },           {             value: '4',             label: '龙须面'           },           {             value: '5',             label: '北京烤鸭'           }         ]       }, 2000)     },     getSelectVal (val) {       console.log(val, 'val')     }   } } </script>  <style lang="less"> #app {   display: flex;   justify-content: center; } </style> 

3. 根据selectOptions配置项修改组件属性，父组件请求数据传入子组件进行渲染，当子组件出发change方法时
   使用emit将所选的值回传父组件，进行后续代码逻辑

欢迎大家评论，如有帮助可以关注+收藏，我会经常更新博客，大家一起讨论学习