vue+axios+easy-mock+element-ui实现表格分页功能

废话不多，效果如图：

LineSource.vue文件内代码如下：

<template>
    <div class="c-main auth userControl">
        <h3>线路资源</h3>
        <el-table :data="list.slice((currpage - 1) * pagesize, currpage * pagesize)" border style="width: 100%">
            <el-table-column type="index" label="序号">
            </el-table-column>
            <el-table-column label="图片">
                <template slot-scope="scope">
                    <img :src="scope.row.image" width="40" height="40"/>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="商品名称">
            </el-table-column>
            <el-table-column prop="goodsId" label="ID">
            </el-table-column>
            <el-table-column prop="price" label="价格">
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next, sizes, total, jumper"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            :total="list.length"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange">
        </el-pagination>
    </div>
</template>
<script>
    import axios from 'axios';
    axios.defaults.baseURL = 'https://www.easy-mock.com/mock/5ae417e4985d63275b55e177/luckLin';
    axios.defaults.timeout = 20000;
    export default {
        data () {
            return {
                msg: 8888,
                list: [],
                pagesize: 10,
                currpage: 1
            };
        },
        methods: {
            getlist () {
                let starttime = new Date();
                axios.get('/mockDrink').then(data => {
                    console.log(new Date() - starttime);
                    this.list = data.data.data;
                }).catch(err => {
                    console.error(err);
                    window.alert('请求超时，刷新重试！');
                });
            },
            handleCurrentChange (cpage) {
                this.currpage = cpage;
            },
            handleSizeChange (psize) {
                this.pagesize = psize;
            }
        },
        mounted () {
            this.getlist();
        }
    };
</script>

巴特西

vue+axios+easy-mock+element-ui实现表格分页功能

废话不多，效果如图：

LineSource.vue文件内代码如下：

搞定收工！

最新文章

热门文章