element知识复盘,小白封装
不封装直接页面使用时
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
:layout="layout"
:total="total"
>
</el-pagination>
data() {
return {
currentPage: 1,
pageSizes: [10, 20, 300, 400],
pageSize: 10,
layout: 'total, sizes, prev, pager, next, jumper',
total: 100,
}
},
methods: {
// 每页条数更改
handleSizeChange(val) {
this.pageSize = val
this.currentPage = 1//调整每页数目时,重置当前页,避免当前显示在不存在的页数
fn()//调接口,更新数据
},
// 更改当前页
handleCurrentChange(val) {
this.currentPage = val
fn()//调接口,更新数据
}
}
mixins封装js部分
把通用的js部分封装成mixins并main.js中全局注册时,避免重复js部分;分页器页面中不需要在写js部分,若有相同的内容,mixins内容被覆盖
mixins文件
export default {
data() {
return {
total: 0,//数据总数量
currentPage: 1,//当前页数
pageSize: 1,//每页显示个数
pageSizes: [1, 2, 3, 4],//每页显示个数选择器的选项设置
}
},
methods: {
//更改每页显示个数
handleSizeChange(val, func) {
this.pageSize = val
this.currentPage = 1//也可通过接口函数传参更改
/*
func(1),
httpInit(current) {
if (current) this.current = current
this.$api.....
*/
// func为回调再执行一次列表接口
func()
},
//更改当前页
handleCurrentChange(val, func) {
this.currentPage = val
func()
}
}
}
.vue页面引入并使用
<el-pagination
@size-change="handleSizeChange($event,getCatelist)"
@current-change="handleCurrentChange($event,getCatelist)"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="total,sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
//局部引入
import mixins from "@/utils/mixins";
export default {
mixins: [mixins],
}
封装.vue组件
1.在分页器 样式统一不变 的情况下(不用父组件控制分页器的样式)
父组件:需要接口需要的参数(pageSize,currentPage),子传父(父组件更新total)
子组件:需要接口更新的total,父传子,(分页器更新其他所有参数,父组件需要的参数再通知父组件也更改)
子组件(分页器内容):
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
:page-sizes="pageSizes" :page-size="pageSize" :layout="layout" :total="total"
>
</el-pagination>
//html部分和直接页面使用一致
props: {//接收父组件接口更新后的值
total: {
type: Number,
default: 100
}},
data() {
return {//其他参数不变
currentPage: 1,//----父组件接口需要的数据
pageSizes: [2, 3, 300, 400],
pageSize: 10,///---父组件接口需要的数据
layout: 'total, sizes, prev, pager, next, jumper',
// total: 100,通过父组件接口更新后传入,props接收
}
},
methods: {
// 每页条数更改
handleSizeChange(val) {
this.$emit('handleSizeChange', val)//子传父:通知父组件也同步更改,用于更新接口参数,重新发送接口
//更新分页器的值,重新渲染样式
this.pageSize = val
this.currentPage = 1//调整每页数目时,重置当前页,避免当前显示在不存在的页数
},
// 更改当前页
handleCurrentChange(val) {
this.$emit('handleCurrentChange', val)//子传父
//更新分页器的值,重新渲染样式
this.currentPage = val
}
}
父组件(调用分页器组件)
//父组件使用(最小力度传值)
<pagination
:total="totals"
@handleSizeChange="getParams"
@handleCurrentChange="getParams1">
</pagination>
data() {
return {
totals: 0,//子组件所需:用于接收接口更新后的值并传给分页器
paramas: {//父组件接口所用的参数:分页器更新后,使用父传子更新父组件的值(初始值与分页器初始值一致)
pageSize: 2,
currentPage: 1,
},
tableData: []
}
},
methods:{
// 获取接口需要的每页条数参数:父组件更新子组件传入的参数值
getParams(val) {
this.paramas.pageSize = val//和分页器同步更改参数值
this.paramas.currentPage = 1
console.log('每页条数更改');
this.getData()//更新接口数据
},
// 获取接口需要的页码参数:父组件更新子组件传入的参数值
getParams1(val) {
this.paramas.currentPage = val//和分页器同步更改参数值
console.log('页码更改');
this.getData()//更新接口数据
},
//接口函数
async getData() {
let res = await api_usersList({ ...this.paramas })
this.totals = res.total//父传子数据,更新分页器
this.tableData = res.data
console.log('res', res);
},
}
2.子组件 分页器的样式要根据父组件传值更改 的情况下
分页器的样式根据父组件的传值改变
父组件:需要封装1一样的参数(pageSize,currentPage),用于接口更新参数(父组件控制分页器的所有属性的更改,再通过props分页器自动同步更改)
子组件:需要父组件传入total和一些其他需要更改的值(不需要分页器自己更改数据,都是父组件更改后props传入)
子组件(分页器)
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="pageSize"
:layout="layout"
:total="total"
>
</el-pagination>
//html部分依旧保持与直接使用不变
//data中的值全部改成父传子接收,不传值的时候使用default的值
props: {
currentPage: {
type: Number, default: 1
},
pageSizes: {
type: Array, default: () => [10, 20, 30, 40]
},
pageSize: {
type: Number, default: 10
},
total: {
type: Number, default: 100
},
layout: {
type: String, default: 'total, sizes, prev, pager, next, jumper'
},}
methods: {
// 每页条数更改
handleSizeChange(val) {
this.$emit('handleSizeChange', val)//通知父组件更改数据,更改后用父传子同步更新子组件
// 数据是父传子时,更改数据只能是父组件修改,父组件更改后用父传子同步更新子组件,不需要子组件再更新一次
// this.pageSize = val
// this.currentPage = 1//调整每页数目时,重置当前页,避免当前显示在不存在的页数
},
// 更改当前页
handleCurrentChange(val) {
this.$emit('handleCurrentChange', val)//同上一个函数
// this.currentPage = val
}
}
父组件
//绑定需要更改的部分
<Pagination
:currentPage="currentPage"
:pageSize="pageSize"
:total="total"
@handleCurrentChange="handleCurrentChange"
@handleSizeChange="handleSizeChange">
</Pagination>
data() {
return {
pageSize: 10,
currentPage: 1,
total: 0,
}
}
methods: {
// 每页条数更改
handleSizeChange(val) {
this.pageSize = val
this.currentPage = 1
this.getData()//更新页面
},
// 更改当前页
handleCurrentChange(val) {
this.currentPage = val
this.getData()//更新页面
},
}
mixins.js封装分页器的
暂时小白技术只能封装这几种,具体使用哪种可以根据具体情况而定,虽然感觉封装了也没方便多少,但起码能稍微简练一下页面结构。记录一下。