layui 分页 + vue渲染表格（html） （layui已于2021-10-13下架）

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>