vue elementui不同分页效果集合代码-html代码-BFW代码库

vue elementui不同分页效果集合代码

代码语言：html

所属分类：其他

代码描述：vue elementui实现不同分页效果集合代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/element-ui.2.15.1.css">
</head>

<body>
    <div id="myVue">

        <h2>一款通用分页，基于element-ui</h2>
        <p>1.基础用法</p>
        <div class="block">
            <span class="demonstration">页数较少时的效果</span>
            <el-pagination layout="prev, pager, next" :total="50">
            </el-pagination>
        </div>
        <div class="block">
            <span class="demonstration">大于 7 页时的效果</span>
            <el-pagination layout="prev, pager, next" pagesize=10 :total="66">
            </el-pagination>
        </div>
        <p>2.带有背景色的分页</p>
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
        <p>3.小型分页</p>
        <el-pagination small layout="prev, pager, next" :total="50">
        </el-pagination>
        <p>4.附加功能</p>
        <div class="block">
            <span class="demonstration">显示总数</span>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000">
            </el-pagination>
        </div>
        <div class="block">
            <span class="demonstration">调整每页显示条数</span>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage2" :page-sizes="[100, 200, 300,.........完整代码请登录后点击上方下载按钮下载查看