vue+element ui 静态数据分页联动

最新推荐文章于 2024-06-06 16:36:35 发布

原创

最新推荐文章于 2024-06-06 16:36:35 发布 · 1.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #vue.js #html5

本文介绍如何使用Vue.js结合Element UI库，实现静态数据的分页功能。详细展示了html、js和css代码段，帮助读者理解分页联动的实现过程。

页面最后展示部分

在这里插入图片描述

以下是完整代码

html部分

<template>
    <div>
        <el-row type="flex" justify="end">
            <el-button type="success" disabled :span="6">批量通过</el-button>
            <el-button type="danger" disabled :span="6">批量不通过</el-button>
        </el-row>
        <el-table
            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            border
            style="width: 100%">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column
            fixed
            prop="date"
            label="日期"
            min-width="150">
            </el-table-column>
            <el-table-column
            prop="name"
            label="姓名"
            min-width="120">
            </el-table-column>
            <el-table-column
            prop="province"
            label="省份"
            min-width="120">
            </el-table-column>
            <el-table-column
            prop="city"
            label="市区"
            min-width="120">
            </el-table-column>
            <el-table