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>      

<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>      

沒有人能一路單純到底，但是要記住，别忘了最初的自己!