vue+elementUI的el-table分页+选中事件问题+参数变化页面不刷新问题

elementUI的el-table单选不是radio单选框，而是highlight形式的，不过这不影响。

下面给出我的分页+单选事件代码：

其中脚本代码中要预置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)

    }

},