状态管理
导入vuex
创建时直接选vuex
npm安装vuex
npm install vuex@next --save
//如果是vue2则需要注意版本
npm install [email protected] --save
配置文件
index.js
import Vue from "vue";
import Vuex from 'vuex'
import state from "@/store/state";
import mutations from "@/store/mutations";
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations
});
mutation.js
export default {
shareMenu(state, data) {
state.allPermission = data;
}
}
state.js
export default function(){
return{
allPermission:[]
}
}
main.js
this.$store引用,任意组件都可以
分页
<el-pagination
:page-sizes="[2, 4, 6, 8]"
:current-page="searchPage.current"
:page-size="searchPage.size"
:total="searchPage.total"
layout="->,total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@next-click="nextPage"
@prev-click="prevPage">
</el-pagination>
-
:page-sizes="[2, 4, 6, 8]"
:page-sizes
属性定义了每页显示的数据量选项,这里的选项是一个数组,包含了[2, 4, 6, 8]
四个数字。 -
:current-page="searchPage.current"
:current-page
属性指定当前选中的页码,它与searchPage
对象中的current
属性绑定,用于显示当前所在的页码。 -
:page-size="searchPage.size"
:page-size
属性定义每页显示的数据量,它与searchPage
对象中的size
属性绑定,用于指定每页要显示的数据数量。 -
:total="searchPage.total"
:total
属性指定了总共的数据量,它与searchPage
对象中的total
属性绑定,用于显示总数据量。 -
layout="->,total, sizes, prev, pager, next, jumper"
:layout
属性定义了分页器的布局方式,各个部分之间用逗号分隔。这个布局包含了箭头、总数据量、数据量选择、上一页、页数、下一页和跳转输入框等部分。 -
@size-change="handleSizeChange"
:size-change
事件在用户改变每页数据量选项时触发,它绑定到名为handleSizeChange
的方法,用于处理每页数据量改变时的逻辑操作。 -
@current-change="handleCurrentChange"
:current-change
事件在用户改变当前页码时触发,它绑定到名为handleCurrentChange
的方法,用于处理当前页码改变时的逻辑操作。 -
@next-click="nextPage"
:next-click
事件在用户点击下一页按钮时触发,它绑定到名为nextPage
的方法,用于处理下一页按钮点击时的逻辑操作。 -
@prev-click="prevPage"
:prev-click
事件在用户点击上一页按钮时触发,它绑定到名为prevPage
的方法,用于处理上一页按钮点击时的逻辑操作。
从后端获取数据
searchPage:{
total: 0,
size:2,
current: 0,
},
mounted() {
const params=new URLSearchParams();
//设置表单数据
params.set('currentPage','0');
params.set('size',this.searchPage.size)
axios.post('http://localhost:9000/permissionList',params)
.then(res => {
console.log(res);
this.permissionList = res.data.data.records;
this.searchPage.total = res.data.data.total;
this.searchPage.current = res.data.data.current;
})
}
prevPage:向后翻页
prevPage(val) {
console.log("向后size",this.searchPage.size)
axios.post('http://localhost:9000/permissionList', qs.stringify({
currentPage: `${val}`,
size: this.searchPage.size
}))
.then(res => {
this.permissionList = res.data.data.records;
this.searchPage.total = res.data.data.total;
this.searchPage.current = res.data.data.current;
})
},
nextPage:向前翻页
nextPage(val) {
console.log("向前size",this.searchPage.size)
axios.post('http://localhost:9000/permissionList', qs.stringify({
currentPage: `${val}`,
size: this.searchPage.size
}))
.then(res => {
this.permissionList = res.data.data.records;
this.searchPage.total = res.data.data.total;
this.searchPage.current = res.data.data.current;
})
},
handleSizeChange:切换每页几条记录
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.searchPage.size= val
this.searchPage.current=1
console.log("size",this.searchPage.size)
axios.post('http://localhost:9000/permissionList', qs.stringify({
currentPage: this.searchPage.current,
size:this.searchPage.size
}))
.then(res => {
this.permissionList = res.data.data.records;
this.searchPage.total = res.data.data.total;
this.searchPage.current = res.data.data.current;
})
},
handleCurrentChange:点击页码
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.searchPage.current= val
console.log("size",this.searchPage.size)
axios.post('http://localhost:9000/permissionList', qs.stringify({
currentPage: this.searchPage.current,
size:this.searchPage.size
}))
.then(res => {
this.permissionList = res.data.data.records;
this.searchPage.total = res.data.data.total;
this.searchPage.current = res.data.data.current;
})
},