element-ui Pagination组件源码分析整理笔记（七）
element-ui源码的版本是2.4.9
pagination.js
import Pager from './pager.vue';
import ElSelect from 'element-ui/packages/select';
import ElOption from 'element-ui/packages/option';
import ElInput from 'element-ui/packages/input';
import Locale from 'element-ui/src/mixins/locale';
import { valueEquals } from 'element-ui/src/utils/util';
export default {
name: 'ElPagination',
props: {
pageSize: { //每页显示条目个数，支持.sync 修饰符
type: Number,
default: 10
},
small: Boolean, //是否使用小型分页样式
total: Number, //总条目数
pageCount: Number, //总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性
pagerCount: { //页码按钮的数量，当总页数超过该值时会折叠
type: Number,
validator(value) {
return (value | 0) === value && value > 4 && value < 22 && (value % 2) === 1;
},
default: 7
},
currentPage: { //当前页数，支持 .sync 修饰符
type: Number,
default: 1
},
layout: { //组件布局，子组件名用逗号分隔
default: 'prev, pager, next, jumper, ->, total'
},
pageSizes: { //每页显示个数选择器的选项设置
type: Array,
default() {
return [10, 20, 30, 40, 50, 100];
}
},
popperClass: String, //每页显示个数选择器的下拉框类名
prevText: String, //替代图标显示的上一页文字
nextText: String, //替代图标显示的下一页文字
background: Boolean, //是否为分页按钮添加背景色
disabled: Boolean //是否禁用
},
data() {
return {
internalCurrentPage: 1, //当前的页码
internalPageSize: 0, //总页数
lastEmittedPage: -1,
userChangePageSize: false
};
},
//render函数生成el-pagination
render(h) {
//最外层的div标签
let template = ;
const layout = this.layout || '';
if (!layout) return;
const TEMPLATE_MAP = {
prev:
{
this.pageSizes.map(item =>
)
}
);
},
components: {
ElSelect,
ElOption
},
methods: {
handleChange(val) {
if (val !== this.$parent.internalPageSize) {
this.$parent.internalPageSize = val = parseInt(val, 10);
this.$parent.userChangePageSize = true;
//如果父组件中pageSize用了.sync 修饰符，这里将会触发父组件的update，改变pageSize的值
this.$parent.$emit('update:pageSize', val);
//触发父组件的size-change事件，将改变的每页显示的条目个数的值传递出去
this.$parent.$emit('size-change', val);
}
}
}
},
//前往多少页组件
Jumper: {
mixins: [Locale],
data() {
return {
oldValue: null
};
},
components: { ElInput },
watch: {
'$parent.internalPageSize'() {
this.$nextTick(() => {
this.$refs.input.$el.querySelector('input').value = this.$parent.internalCurrentPage;
});
}
},
methods: {
handleFocus(event) {
this.oldValue = event.target.value;
},
handleBlur({ target }) {
this.resetValueIfNeed(target.value);
this.reassignMaxValue(target.value);
},
// 按下回车，前往多少页
handleKeyup({ keyCode, target }) {
if (keyCode === 13 && this.oldValue && target.value !== this.oldValue) {
this.handleChange(target.value);
}
},
// 改变当前页
handleChange(value) {
// 更新页码列表中当前页的值
this.$parent.internalCurrentPage = this.$parent.getValidCurrentPage(value);
this.$parent.emitChange();
this.oldValue = null;
this.resetValueIfNeed(value);
},
resetValueIfNeed(value) {
const num = parseInt(value, 10);
if (!isNaN(num)) {
if (num < 1) {
// 调用input中的setCurrentValue方法，将input中的值设置为1
this.$refs.input.setCurrentValue(1);
} else {
// 如果input中输入的值，大于最大页码，则置为最大页码值
this.reassignMaxValue(value);
}
}
},
reassignMaxValue(value) {
const { internalPageCount } = this.$parent;
if (+value > internalPageCount) {
// 调用input中的setCurrentValue方法，将input中的值设置为internalPageCount或者为1
this.$refs.input.setCurrentValue(internalPageCount || 1);
}
}
},
// 前往多少页
render(h) {
return (
{ this.t('el.pagination.goto') }
pager.vue
- 1
- {{ pager }}
- {{ pageCount }}