以 Element-UI 分页组件的完整功能为例
官方文档组件实例的代码如下：
<template>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage1"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
currentPage1: 4
};
}
}
</script>
官方文档中规定的事件有 size-change 和 current-change，如下图：
但是，可以看到参数也被规定了，默认情况是一个参数：val，如果在这还要传递其他自定义的参数，
写成
@size-change=”handleSizeChange(param1, val)” 和
@current-change=”handleCurrentChange(param2, val)”
这样是无效的。
应该改为：
@size-change=”(val) => handleSizeChange(param1, val)”
@current-change=”(val) => handleCurrentChange(param2, val)”
<template>
<div class="block">
<el-pagination
@size-change="(val) => handleSizeChange(param1, val)"
@current-change="(val) => handleCurrentChange(param2, val)"
:current-page="currentPage1"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleSizeChange(myParam, val) {
console.log('自定义参数1', myParam);
},
handleCurrentChange(myParam, val) {
console.log('自定义参数2', myParam);
}
},
data() {
return {
currentPage1: 4
};
}
}
</script>
本例中这种情况通常在一个 vue 文件中，采用不同的标签页下展示不同的数据内容（带有分页组件）时会用到，
需要另外传不同标签页值的参数，以便区分不同标签页下的分页组件：
这是我本人在工作学习中做的一些总结，同时也分享出来给需要的小伙伴哈 ~ 供参考学习，有什么建议也欢迎评论留言，转载请注明出处哈，感谢支持！