Element数据分页

1.显示表格

<div id="app">

     <template >   
    <div >
            <el-table:data="tableData2"
            style="width: 100%;">
            <el-table-column
                prop="id"
                label="id"
                width="180">
            </el-table-column>
            <el-table-column
                prop="company_name"
                label="公司名称"
                width="180">
            </el-table-column>
            <el-table-column
                prop="mobile"
                label="手机">
            </el-table-column>
        </el-table>
    </div>
    <div class="block">
        <span class="demonstration">完整功能</span>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageTotal">
        </el-pagination>
    </div>
</template>
</div>

2.请求数据js代码

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: function() {
            return { visible: false,
                    pageNum : [5, 10, 15, 20],
                    currentPage1: 1,
                    pageTotal:100,
                    tableData: [{
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }],
                    tableData2:[]
            }
        },
        created:function(){
            $.ajax({
                type:"POST",
                dataType:"json",
                data:{"current_page":1},
                url:"/merchant/customer/getVueData",
                success:function(json) {

                    vm.tableData2 = json.data;

                    vm.pageTotal = parseInt(json.count);
                    console.log(vm.pageTotal);
                }
            });
        },
        methods:{
            handleSizeChange(){

            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                $.ajax({
                    type:"POST",
                    dataType:"json",
                    data:{"current_page":`${val}`},
                    url:"/merchant/customer/getVueData",
                    success:function(json) {

                        vm.tableData2 = json.data;

                    }
                });
            }
        },

    })
</script>

3.PHP代码查询

public function actionGetVueData(){
    $connection = Yii::app()->db;
    $merchant_id = $this->getMerchantId();

    if(IS_POST){

        /*
         * $beginPage:开始条数
         * $page:查询条数
         */
        $current_page = $_POST["current_page"];
        if($current_page == 1){
            $beginPage = 0;
            $page = 10;
        }else{
            $beginPage = (($current_page-1)*10);
            $page = 10;
        }

        //条数
        $sql = "SELECT count(id) as countIds FROM {{customer}} WHERE merchant_deleted = 'N' && merchant_id = ".$merchant_id." ";
        $command = $connection -> createCommand($sql) ;
        $customerCountArr = $command -> queryAll();
        //数据
        $sql = "SELECT id,company_name,mobile FROM {{customer}} WHERE  merchant_deleted = 'N' && merchant_id = ".$merchant_id." limit ".$beginPage.",".$page." ";

        $command = $connection -> createCommand($sql);
        $customerData = $command -> queryAll();

        $ajax["count"] = $customerCountArr[0]["countIds"];
        $ajax["data"] = $customerData;
        echo json_encode($ajax);
        exit();
    }


}