vue+element ui 写分页器

最新推荐文章于 2022-11-12 12:19:50 发布

张清悠

最新推荐文章于 2022-11-12 12:19:50 发布

阅读量121

点赞数

分类专栏： 💥Vue💥

本文链接：https://blog.csdn.net/weixin_48193717/article/details/119081898

版权

💥Vue💥 专栏收录该内容

36 篇文章 4 订阅

订阅专栏

分页器vue+element ui

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页器</title>

</head>
<style type="text/css">
    html {
        width: 100%;
        height: 100%;
        background-color: white;
    }

    body {
        margin: 0;
        padding: 0;
        height: 100%;
        border: 0;
        overflow: hidden;
    }

    .el-form-item__content {
        line-height: 23px !important;
    }

    .flexToOne {
        height: 20px;
    }
</style>

<body>
    <div id="app" style="padding: 15px;">
        <div class="form-box marginB20">
            <el-form :model="ruleForm" ref="loginFormRef" inline-message ref="ruleForm" label-position="top"
                label-width="100px" class="demo-ruleForm">
            </el-form>
        </div>
        <el-table  :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" 
        border v-loading="loading" :height="tableHeight">
            <el-table-column type="index" align="center" fixed="left" label="序号" width="100">
                <template slot-scope="scope">
                    <div v-text="(currentPage-1)*pagesize+1+scope.$index"></div>
                </template>
            </el-table-column>
            <el-table-column align="center"  label="日志log" >
                <template slot-scope="scope">
                    <div v-text="tableData[(currentPage-1)*pagesize+scope.$index]"></div>
                </template>
            </el-table-column> 
            <el-table-column  align="center" label="地址ip" width="300">
                <template slot-scope="scope">
                    <div v-text="tableDataa[(currentPage-1)*pagesize+scope.$index]"></div>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="操作" width="250">
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination style="text-align: right;margin-top: 10px;" small @current-change="handleCurrentChange"
            background @size-change="handleSizeChange" background   :current-page="currentPage"
            :page-size="pagesize"
            :page-sizes="[10, 20, 30, 40]"
            :total="tableData.length" layout="total,sizes, prev, pager, next, jumper">
        </el-pagination>
    </div>
</body>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                
                currentPage: 1, //当前页
                pagesize: 10,   //显示条
                tableHeight: "300px",
                tableData: [],   //log日志
           
            }
        },
        methods: {
               // 日志监控列表数据渲染 
            toList() {
                var that = this
                that.loading = true;
                axios.get(api.logmonitoring,
                    {
                    }).then(function (response) {
                        that.loading = false;  //隐藏loading图标
                        console.log(response.data.data);
                        var Ipconfig = [];
                        for (var i in response.data.data.address) {
                            Ipconfig.push(response.data.data.address)
                        }

                        that.tableData= response.data.data.allLogList //log日志
                        console.log(that.tableData);
                        that.tableDataa= Ipconfig  //ip地址
       
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            //设置条数触发事件 
            handleSizeChange: function (val) {
              console.log(`每页:${val}条`);
                this.pagesize = val
                console.log(1111111);
                console.log(this.pagesize);
                
            },
            //设置当前页触发事件
            handleCurrentChange: function (currentPage) {
                console.log(`当前页: ${currentPage}`);
                this.currentPage = currentPage
                console.log(22222222);
                console.log(this.currentPage);
            },
        },
        created() {
           
            //获取日志监控列表
            that.toList();
        },
    })
</script>

</html>

张清悠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue+element ui 写分页器

分页器vue+element ui<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫