Elementui 在线获取表格数据

    

    

    

    

    

    

        

        

        

        

        

        

        

        {{$moment().format('YYYY-MM-DD HH:mm:ss')}}

        

    

    

        

                @size-change="handleSizeChange"

                @current-change="handleCurrentChange"

                :current-page="currentPage"

                :page-sizes="[10, 20, 30, 40]"

                :page-size="10"

                layout="total, sizes, prev, pager, next, jumper"

                :total="Number(totalCount)">

        

    

    Vue.prototype.$moment = moment

    Vue.prototype.$http = axios

    var vue = new Vue({

        el: '#app',

        data: {

            //表格当前页数据

            tableData: [],

            //默认每页数据量

            pagesize: 10,

            //当前页码

            currentPage: 1,

            //默认数据总数

            totalCount: 0,

            //url参数

            urlParams: {

                page: 1,

                limit: 10,

            },

        },

        computed: {

            getQueryString: function () {

                let QueryString = '';

                for (var i in this.urlParams) {

                    QueryString += i + "=" + this.urlParams[i] + "&";

                    console.log(i);

                    console.log(i,this.urlParams[i]);

                }

                console.log(QueryString);

                return QueryString.slice(0, -1);

            },

        },

        methods: {

            //从服务器读取数据

            loadData: function () {

                let _this = this

                this.$http.get('http://xxxxxxxxxxxxxx/get_user_list?' + this.getQueryString).then(function (res) {

                    console.log(res.data);

                    if (res.data.code == 0) {

                        _this.tableData = res.data.data;

                        _this.totalCount = res.data.count;

                    } else {

                        return;

                    }

                })

                    .catch(err => {

                        console.log(err);

                    });

            },

            //每页显示数据量变更

            handleSizeChange: function (val) {

                this.urlParams.limit = val;

                this.loadData();

            },

            //页码变更

            handleCurrentChange: function (val) {

                this.urlParams.page = val;

                this.loadData();

            },

        },

        created() {

            this.loadData();

        },

    });