element ui 分页

win

第一种table

<el-table:data="tableData         .slice((currentPage-1)*pagesize,currentPage*pagesize)"
:stripe="stripe"
:current-page.sync="currentPage"
style="width: 100%"
tooltip-effect="dark">
/*.....你的表格数据*/</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[10, 15, 20,50,100]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
下面是JS//分页
stripe: true,//是否为斑马纹 table
currentPage: 1,
pagesize: 10,
total: 0,
tableData: [{
    id: '',
}],
methods: {
   //分页handleSizeChange(val) {
    this.pagesize = val;
},
handleCurrentChange(val) {
    this.currentPage = val;
},
    },

win

第二种，后台遍历后的数据，我用的是读取后台txt文件渲染到前台
<el-main>

            <el-button size="mini" type="warning" @click="tableRest">刷新</el-button>

            <div style="margin: 15px 0;">
                <div class="container">
                    <div class="block">
                        <span class="demonstration">按年</span>
                        <el-date-picker
                                v-model="day"
                                type="year"
                                value-format="yyyy"
                                placeholder="选择年">
                        </el-date-picker>
                        <el-button type="primary" plain @click="userLogIng">查询</el-button>
                    </div>

                </div>

            </div>

            <template>
                             <div v-for="(item, key, index)  in txtData.slice((currentPage-1) * pagesize, currentPage * pagesize)" :key="index">
                                 <span>{{item}}</span>
                                 <el-divider></el-divider>
                             </div>
                <div style="margin-top: 20px">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30,50,100]"
                            :page-size="pagesize"
                            background
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </template>

        </el-main>


下面是JS
<script>
    new Vue({
        el: '#app',
        data: {
            //按日历年搜索
            day:'',
            //文本数据
            txtData:[],
            //分页
            stripe: true,//是否为斑马纹 table
            currentPage: 1,
            pagesize: 10,
            total: 0,
        },
        //初始化执行，方法只在刷新页面的时候执行一次。
        created() {
            this.getNowTime();
        },
        //初始化执行
        mounted() {
            this.userLogIng();
        },
        methods: {
            //重载刷新按钮
            tableRest() {
                    this.userLogIng();
            },
            //时间搜索初始化为当前时间
            getNowTime() {
                var now = new Date();
                var year = now.getFullYear(); //得到年份
                var month = now.getMonth(); //得到月份
                var date = now.getDate(); //得到日期
                month = month + 1;
                month = month.toString().padStart(2, "0");
                date = date.toString().padStart(2, "0");
               // var defaultDate = `${year}-${month}-${date}`;
                //var defaultDate = `${year}`;
                this.day = `${year}`;
                //this.$set(this.day,'day', defaultDate);
            },
            //日志数据
            userLogIng() {
                this.$message("正在拉取数据...");
                setTimeout(()=>{
                    axios({
                    method: 'post',
                    url: '/myadd/mylog/loging_do',
                    data: {rtime:this.day},
                }).then((res) => {
                    if (res.data.code === 0) {
                        this.$message(res.data.msg);
                        this.txtData = res.data.data;
                        this.total = res.data.count;
                    } else if (res.data.code === 1) {
                        this.$message.error(res.data.msg);
                        this.txtData = res.data.data;
                        this.total = res.data.count;

                    }
                });
        }, 2000);

            },

            //分页
            handleSizeChange(size) {
                this.pagesize = size;
            },
            handleCurrentChange(size) {
                this.currentPage = size;
            },

        },
    })
</script>


再下面是THINKPHP5.1后台数据
    //读取txt文件数据2023.1.19VUE
    public function loging_do()
    {
        $this->feiLogin();  //Base公共控制器，非法登录
        $sid = Cookie::get('userid');
        //默认输出为当前年
        //$logtime = date("Y");
        //获取前端要查询的post数据
        $caotime = Request::param('rtime');

        $wenjian = "updata/user/log/$sid/$caotime.txt";

        //判断如果文件不存在
        if (!file_exists($wenjian)) {
            $logtime = date("Y");
            $wenjian = "updata/user/log/$sid/$logtime.txt";
            $file = file_get_contents($wenjian);
            //把子串格式化为数组元素
            $rep = str_replace("\r\n", '', $file);
            //分割为数组，每行为一个数组元素
            $counts = explode(';', $rep);
            //去除空元素、空行。
            $rows = array_filter($counts);
            //如果post过来的数据为空、判断要查找的文件是否存在
            $count = count($rows);    //统计数组元素总行数
            return json(['code' => 1, 'msg' => '文件不存在，返回当前年', 'count' => $count, 'data' => $rows]);
        } else {
            $file = file_get_contents($wenjian);
            //把子串格式化为数组元素
            $rep = str_replace("\r\n", '', $file);
            //分割为数组，每行为一个数组元素
            $count = explode(';', $rep);
            //去除空元素、空行。数组去空
            $rows = array_filter($count);
            //如果post过来的数据为空、判断要查找的文件是否存在
            $count = count($rows);    //统计数组元素总行数
            return json(['code' => 0, 'msg' => '数据读取成功...', 'count' => $count, 'data' => $rows]);
        }

    }