elementUI的el-table單選不是radio單選框，而是highlight形式的涌矢，不過(guò)這不影響。
下面給出我的分頁(yè)+單選事件代碼：
<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>
其中腳本代碼中要預(yù)置data
data(){
return {
// 總數(shù)據(jù)
? ? ? ? tableData:[],
? ? ? ? // 默認(rèn)顯示第幾頁(yè)
? ? ? ? currentPage:1,
? ? ? ? // 總條數(shù)快骗，根據(jù)接口獲取數(shù)據(jù)長(zhǎng)度(注意：這里不能為空)
? ? ? ? totalCount:1,
? ? ? ? // 個(gè)數(shù)選擇器（可修改）
//pageSizes:[1,2,3,4],
// 默認(rèn)每頁(yè)顯示的條數(shù)（可修改）
? ? ? ? PageSize:5,
? ? }
},
對(duì)于表格內(nèi)的數(shù)據(jù)蒿辙，我項(xiàng)目中的需求是按照以下該method來(lái)獲取：
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);
? ? ? ? }
})
},
另外因?yàn)槲疫@里的需求是你要預(yù)加載這個(gè)數(shù)據(jù)滨巴，所以要用鉤子函數(shù)思灌，這里我們用created
created:function(){
this.getUserStock()
},
關(guān)于分頁(yè)的處理，還要寫(xiě)以下函數(shù)恭取，這里有個(gè)神坑泰偿，就是我不小心把兩個(gè)handleCurrentChange重復(fù)命名了=-=，還好后來(lái)發(fā)現(xiàn)蜈垮，把分頁(yè)這里多+了個(gè)s => handlesCurrentChange
// 分頁(yè)
// 每頁(yè)顯示的條數(shù)
handleSizeChange(val) {
// 改變每頁(yè)顯示的條數(shù)
? ? this.PageSize=val
// 注意：在改變每頁(yè)顯示的條數(shù)時(shí)耗跛，要將頁(yè)碼顯示到第一頁(yè)
? ? this.currentPage=1
},
// 顯示第幾頁(yè)
handlesCurrentChange(val) {
// 改變默認(rèn)的頁(yè)數(shù)
? ? this.currentPage=val
},
然后單擊表格某條記錄就跳轉(zhuǎn)
handleCurrentChange(val) {
// this.$alert(val.stockId);
? ? this.$api.stockPredict.getByStockId({//post請(qǐng)求
? ? ? ?吧啦吧啦
? ? }).then((res)=>{
console.log(res)
this.load=false
? ? ? ? if(res.data.status=='0'){
吧啦吧啦
? ? ? ? ? ? this.$router.push({name:'showstock',query: {各種參數(shù)}});
? ? ? ? }else {
this.$message.error(res.data.message);
? ? ? ? }
})
}
然后這里又遇到神坑了，因?yàn)楸旧砦覀兙褪窃趕howstock上的子組件攒发。调塌。所以router.push->showstock，可以看到參數(shù)變化惠猿，但是頁(yè)面不刷新
網(wǎng)上查了很多羔砾，簡(jiǎn)單粗暴，用watch來(lái)檢測(cè)路由的變化偶妖，路由變化了直接go(0)
watch: {
'$route' (to, from) {//監(jiān)聽(tīng)路由變化姜凄，防止參數(shù)刷新而頁(yè)面不刷新的情況。
? ? ? ? this.$router.go(0);
? ? ? ? //this.handleCurrentChange(this.val)
? ? }
},
