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

最新推荐文章于 2024-05-01 18:11:35 发布

Polarisone

最新推荐文章于 2024-05-01 18:11:35 发布

阅读量1.8k

点赞数 5

分类专栏： element ui H5 文章标签： javascript css vue.js html5

本文链接：https://blog.csdn.net/Polarisone/article/details/103848817

版权

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

摘要由CSDN通过智能技术生成

页面最后展示部分

在这里插入图片描述

以下是完整代码

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>
            <<