今天小编给大家分享一下Vue+ElementUI如何封装简易PaginationSelect组件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
在实际开发工作中,经常会碰到当select下拉数据过需要做分页的情况
这里简单介绍封装的一个Pagination-Select组件几个步骤
封装的比较简易,可以根据自己的项目进行改动
/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>
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>
根据selectOptions配置项修改组件属性,父组件请求数据传入子组件进行渲染,当子组件出发change方法时
使用emit将所选的值回传父组件,进行后续代码逻辑
以上就是“Vue+ElementUI如何封装简易PaginationSelect组件”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。