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>

1. 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>

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

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