vue+elementUI的el-table分页+选中事件问题+
elementUI的el-table单选不是radio单选框，而是highlight形式的，不过这不影响。
下面给出我的分页+单选事件代码：
<template>
<div class="center">
<el-table :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)"
style="width: 100%"
highlight-current-row
@current-change="handleCurrentChange">
<el-table-column prop="stockId" label="股票代码" >
<el-table-column prop="stockName" label="股票名称" >
<div class="tabListPage">
<el-pagination @size-change="handleSizeChange"
@current-change="handlesCurrentChange"
:current-page="currentPage"
:page-sizes="pageSizes"
:page-size="PageSize" layout="total, prev, pager, next, jumper"
:total="totalCount">
</template>
其中脚本代码中要预置data
data(){
return {
// 总数据
tableData:[],
// 默认显示第几页
currentPage:1,
// 总条数，根据接口获取数据长度(注意：这里不能为空)
totalCount:1,
// 个数选择器（可修改）
//pageSizes:[1,2,3,4],
// 默认每页显示的条数（可修改）
PageSize:5,
}
},
对于表格内的数据，我项目中的需求是按照以下该method来获取：
getUserStock(){
this.$api.stock.stockFavorite({
email:sessionStorage.getItem("username")
}).then(({data})=>{
if(data.status=='0'){
var jsonObj=JSON.parse(data.content);
this.totalCount=jsonObj.length
for (var i =0; i < jsonObj.length; i++) {
var record = jsonObj[i];
var stockId = record['stockId'];
var stockName = record['stockName'];
this.tableData.push({
stockId: stockId,
stockName: stockName,
});
}
}else {
this.$message.error(data.message);
}
})
},
另外因为我这里的需求是你要预加载这个数据，所以要用钩子函数，这里我们用created
created:function(){
this.getUserStock()
},
关于分页的处理，还要写以下函数，这里有个神坑，就是我不小心把两个handleCurrentChange重复命名了=-=，还好后来发现，把分页这里多+了个s => handlesCurrentChange
// 分页
// 每页显示的条数
handleSizeChange(val) {
// 改变每页显示的条数
this.PageSize=val
// 注意：在改变每页显示的条数时，要将页码显示到第一页
this.currentPage=1
},
// 显示第几页
handlesCurrentChange(val) {
// 改变默认的页数
this.currentPage=val
},
然后单击表格某条记录就跳转
handleCurrentChange(val) {
// this.$alert(val.stockId);
this.$api.stockPredict.getByStockId({//post请求
吧啦吧啦
}).then((res)=>{
console.log(res)
this.load=false
if(res.data.status=='0'){
吧啦吧啦
this.$router.push({name:'showstock',query: {各种参数}});
}else {
this.$message.error(res.data.message);
}
})
}
然后这里又遇到神坑了，因为本身我们就是在showstock上的子组件。。所以router.push->showstock，可以看到参数变化，但是页面不刷新
网上查了很多，简单粗暴，用watch来检测路由的变化，路由变化了直接go(0)
watch: {
'$route' (to, from) {//监听路由变化，防止参数刷新而页面不刷新的情况。
this.$router.go(0);
//this.handleCurrentChange(this.val)
}
},
