layui 分页vue渲染表格：
步骤：
1、初始化获取表格列表数据，默认显示第一页数据列表；
2、列表渲染完接着初始化layui分页
3、分页点击跳转时再获取指定页码的数据列表
问题点：
点击分页后【jump】跳转分页将页面传递给获取list的方法，数据可以实时渲染最新的，但是方法不能再调用同一个，否则页码不能更新
代码如下：
<script>
new Vue({
el: '#app',
data: {
page: 1,
total: 0,
pageSize: 5,
state: 4,
loadImg: "",
timer: null,
free_status: 1,
list: [],
userInfo: {},
radioData: [
{ value: '使用会员币',balance: "" },
{ value: '使用工单条数',balance: ""}
],
tmpListTotal: 0,
radioVal: 1,
dialog: false,
cIndex: -1,
isFirstPage:true
},
filters: {
/*空字符串转换*/
capitalize: function (value) {
if (!value) return '暂无用户名';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
},
created() {
this.getUserInfo();
this.getList(this.page);
},
mounted() {
this.$nextTick(() => {
window.addEventListener('scroll', this.handleScroll, true);
})
},
methods: {
getList(_page) {
let _url = "/apis/form_message/get_message";
let _this = this;
$.ajax({
url: _url,
data: {
page: _page
},
method: "POST",
success: function (res) {
if (res.code == 1) {
_this.total = res.data.list_count;
_this.pageSize = res.data.pagesize;
if(res.data.list_count === 0){
_this.state = 6;
}
if(res.data.list_count <= _this.pageSize){
_this.state = 5;
}
if (_this.page == 1) {
_this.list = res.data.list;
} else {
_this.list = _this.list.concat(res.data.list);
}
if(_this.isFirstPage){
_this.pageInit(_this.total); // 只有第一页，初始化的时候需要调用，页面跳转的时候不需要，只需要渲染列表即可
}
}
}
});
},
pageInit(listTotal) {
let _this = this;
if(listTotal === 0){
$("#join_page").hide();
}else{
$("#join_page").show();
}
layui.use(['laypage','layer'], function() {
let laypage = layui.laypage,layer = layui.layer;
if(listTotal) {
_this.tmpListTotal = listTotal;
} else {
listTotal = _this.tmpListTotal;
}
//页码初始化
laypage.render({
elem: 'list_page'
,theme: '#007AFF'
, count: listTotal //数据总数
,limit: _this.pageSize // 每页条数
,prev:"<"
,next:">"
,jump: function(obj,first){
if(!first){
_this.isFirstPage = false;
_this.getList(obj.curr);
}else{
_this.isFirstPage = true
}
}
});
});
},
/*获取用户信息*/
getUserInfo() {
let _url = "/form/message.php";
$.ajax({
url: _url,
method: "POST",
async: false, // 同步
success: function (res) {
let _res = JSON.parse(res);
if (_res.code === 1) {
userInfo = Object.assign({}, _res.data);
console.log('userInfo', userInfo);
}
},
error: function (res) {
console.log('error_res', res);
}
});
},
/*选择购买方式*/
getRadioVal() {
console.log('radioVal',this.radioVal);
},
goBuy(index) {
let _this = this;
_this.cIndex = index;
_this.dialog = !_this.dialog;
_this.radioData[0].balance = userInfo.balance;// 剩余会员币余额
_this.radioData[1].balance = userInfo.number; // 剩余工单数量
},
cancel(index){
let _this = this;
_this.cIndex = index;
_this.dialog = !_this.dialog;
},
confirm(index){
let _this = this;
_this.cIndex = index;
this.dialog = !this.dialog;
let paramData = {
type: _this.radioVal,
userid: userInfo.userid,
price:_this.list[index].price,
rid:_this.list[index].rid,
free:_this.list[index].is_resource
}
console.log("confirm",paramData);
let _url = "/apis/form_message/buy_message";
$.ajax({
url: _url,
method: "POST",
data: paramData,
success: function (res) {
layer.msg(res.msg);
if(res.code === 1){
window.location.href= "../member/message.html";
console.log('购买成功', res);
}
},
error: function (res) {
console.log('error_res', res);
}
});
}
}
})
</script>
html:
<div id="app">
<table cellspacing="0" class="tb ls">
<tbody>
<tr>
<th data-hide="1200">用户名</th>
<th data-hide="1200">价格</th>
<th>IP</th>
<th>添加时间</th>
<th>可领取次数</th>
<th>已领取次数</th>
<th>信息</th>
<th>操作</th>
</tr>
<tr v-for="(item,p_index) in list" :key="p_index">
<td>{{item.username | capitalize}}</td>
<td>{{item.price}}</td>
<td>{{item.ip}}</td>
<td>{{item.create_time}}</td>
<td>{{item.number_count}}</td>
<td>{{item.c_number}}</td>
<td>
<ul v-for="(_item,_index) in list[p_index].answer" :key="_index">
<li>{{_item.content}}</li>
</ul>
<div class="mask" v-show="cIndex == p_index && dialog"></div>
<div class="buyBox" v-show="cIndex == p_index && dialog">
<p class="title">购买商品</p>
<p>是否确定购买此商品，提交后不可取消。</p>
<div class="radio" v-for="(item, index) in radioData" :key="index">
<input
type="radio"
v-model="radioVal"
:value="index+1"
@change="getRadioVal"
:id="index+1"
/>
<label :for="index+1">{{ item.value }}<span>剩余：{{item.balance}}</span></label>
</div>
<div class="operate">
<button class="confirm" @click.stop="confirm(p_index)">确定</button>
<button @click.stop="cancel(p_index)">取消</button>
</div>
</div>
</td>
<td><button @click.stop="goBuy(p_index)">购买</button></td>
</tr>
</tbody></table>
<div id="list_page" class="list_page" style="text-align: center;"></div>
</div>