使用ElementUI写一个前端分页查询的实例

2024-10-04 06:35:54

前言

一般我们在做项目的时候，都是通过调用后台接口去做增删改查，但是也有例外，有些某些特定场景下，会让前端去做好增删改查. 那么我们今天就来做一下这个需求. 使用的框架是Vue,UI框架是使用率很高的ElementUI. 那么我们开干吧。

前端分页

假定我们的数据是通过点击一个添加按钮，弹出一个添加弹窗，输入好数据后，点击确定按钮，把数据保存到表格中去. 那么就是这样的

{
    data () {
        return {
            page: {
                pageOffset: 1, // 分页页码, 默认第一页
                pageCount: 20, // 一页的页数, 默认20
            },
            allData: [], // 表格所有数据的数据源
            tableData: [] // 表格数据源
        }
    },
    methods: {
        // 添加按钮，弹窗一系列操作后，点击确定保存数据，调用的方法
        saveData (data) {
            if (!data) return
            this.allData.push(data)
            this.paging()
        },
        // 点击第一页，第二页的监听方法
        pageChange (pageOffset) {
          this.page.pageOffset = pageOffset
          this.paging()
        },
        // 分页方法
        paging () {
            const pageOffset = this.page.pageOffset // 页码
            const pageCount = this.page.pageCount // 一页显示多少个数据
            this.tableData = this.allData.slice((pageOffset - 1) * pageCount, pageOffset * pageCount)
        }
    }
}

具体代码差不多就是这样啦，其实是很简单，但是有的时候，可能也会没有思路。下面来总结一下前端分页的几个点:

需要两个变量，一个存储的是总的数据，一个存储的是我们页面需要展示的分页数据
然后就是根据页码和一页展示的页数通过slice方法去得到

查询

假如在前端分页的内容下，需求再让加上一个查询条件，去过滤数据，并且需要根据多条件过滤，那么怎么办呢？我们可以写一个这样的方法:

// 查询数据
// val:  输入框查询的值
// data: 查询的数据源
// fuzzySearch: 是否是模糊查询
function search (key, val, data, fuzzySearch = false) {
      const searchTxt = val.trim()
      if (searchTxt === '') {
        return data
      }
      // 如果以空格隔开的话，则表示可以多值过滤
      if (searchTxt && ~searchTxt.indexOf(' ')) {
        let searchTxtArr = searchTextToArr(searchTxt)
        return data.filter((o) => {
          return ~searchTxtArr.indexOf(o[key])
        })
      } else {
        // 单值过滤
        return data.filter((o) => {
          // 是否是模糊查询
          return fuzzySearch ? ~o[key].indexOf(searchTxt) : searchTxt === o[key]
        })
      }
}
// 把多选查询条件变成数组
function searchTextToArr (str) {
    let text = str.trim()
    // 过滤掉多余的空格, 比如 '男  女' 中间多输入了一个空格的情况.
    return text.split(' ').filter((o) => {
        return o === '0' || o
    })
}
// 数据
const data = [
    {name: 'james', sex: '男'},
    {name: 'nancy', sex: '女'},
    {name: 'bob', sex: '男'},
    {name: 'allen', sex: '男'},
    {name: 'jack', sex: '男'},
    {name: 'jasmine', sex: '女'},
]
// 测试
search('name', 'jack   jasmine', data) // [{"name":"jack","sex":"男"},{"name":"jasmine","sex":"女"}]
search('name', ' allen ', data) // [{"name":"allen","sex":"男"}]
search('name', 'j', data, true) // [{"name":"james","sex":"男"},{"name":"jack","sex":"男"},{"name":"jasmine","sex":"女"}]

以上代码实现了模糊查询、多值查询、单值精确查询。主要就是利用indexOf、filter去做过滤和判断. 另外还去做了一些用户的误操作的时候的兼容，让用户在不完全符合输入条件的时候，也能找到想要的数据。增强用户体验. 代码的话，里边写了注释，很容易懂。如果有不懂的地方的话，可以留言跟我说一下，大家交流一下.

写在最后

今天主要分享用ElementUI写一个前端分页，然后搜索的话，怎么实现模糊查询、精确查询以及多值查询的功能。内容比较朴素啦。但是还是比较偏实用的。

到此这篇关于使用ElementUI写一个前端分页查询的实例的文章就介绍到这了,更多相关Element 分页查询内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

利用vue和element-ui设置表格内容分页的实例

html代码因为我写在template中,也就是新建了组建中,贴出代码. <el-pagination small layout="prev, pager, next" :total="total" @current-change="current_change"> </el-pagination> 代码中,small代表是否使用小型分页样式 layout代表组件布局,子组件名用逗号分隔属性: total代表总条目数
vue+Element-ui前端实现分页效果

本文实例为大家分享了vue+Element-ui前端实现分页效果的具体代码,供大家参考,具体内容如下分页技术分页技术的概念分页就是将所有的数据分段展示给用户,用户看到的可能不是全部的数据,而是其中一部分,用户可以通过点击页码来查找自己需要的内容,也可以通过模糊查询获取符合内容的数据分页的意义分页确实有效,但它一定会加大系统的复杂度,但可否不分页呢?如果数据量少的话当然可以.但是对于企业信息系统来说数据量不会限制在一个小范围内.如果不顾一切的Select * from某个表,再将返回的数
vue仿element实现分页器效果

1 .起因今日看完element中分页器的源码实现,比较简单,遂自己按着理解实现了一个简单的分页器,记录下来,以便日后温习. 2.实现难点分页器的实现难点主要是什么时候显示分页器的省略, 我的思路是: 规定一个值foldPage, 意为当前最多显示的标签数,当总页数超过即显示省略.省略分为左边省略(folder1)和右边省略(folder2),布局代码如下: <div class="pagination" @click="pageClick"> &l
vue + element-ui的分页问题实现

背景介绍最近比较空闲,公司的后台就想着把现在的后台管理系统给改版一下,说是以前的太难看了,用着也不好用,然后给我甩过来一个ant-design-pro的链接,说是他看这个就挺不错的. 我当时心里就想着,之前的那个项目混合在你们的java项目里,跟普通的jsp页面差不多,一下就是一大堆的css和js文件,看着我都害怕(好吧,我承认其实我都不敢看),这能加载的快了就奇了怪了.ant-design最初是为react设计的,ant-design-pro自然也是用react了,不得不说人家这个界面看着确
Vue+element-ui 实现表格的分页功能示例

本文介绍了Vue+element-ui 实现表格的分页功能示例,分享给大家,具体如下: 实现效果如下图所示: template部分: <el-table :data="tempList" :header-cell-style="rowClass" stripe border style="margin-bottom:14px;" :empty-text="emptyText"> <el-table-colum
Element实现表格分页数据选择+全选所有完善批量操作

后台管理系统中的列表页面,一般都会有对列表数据进行批量操作的功能,例如:批量删除.批量删除等. 之前项目中只是简单的用到Element框架中常规的属性.事件.在一次机缘巧合下,了解到一个公司内部的框架是基于Element框架内部实现了一些插件功能,对于表格这一块完善了很多功能,当时没有把握住机会去看源码是怎么实现的,现在有点小后悔呢,嘤嘤嘤~~~~没关系,自己慢慢一点一点实现. 实现的功能有: 分页数据选择全选所有数据(不是element框架自带的全选本页哦!) 1.分页数据选择一开始以为不
利用vue + element实现表格分页和前端搜索的方法

前言 ElementUI是饿了么前端开源的一个基于Vue的前端框架,已经帮我们封装好了一系列功能性的组件,比如栅格系统.表格.表单.树形菜单.通知等.对于搞后台管理界面的项目,特别是不需要考虑兼容ie8.ie9以下的项目.ElementUI是一个不错的选择. 而且ElementUI的文档写得十分详尽,参照demo可以很快上手. 本文主要介绍了关于vue + element实现表格分页和前端搜索的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 实现思路 1.前端后台管理
vue+Element-ui实现分页效果实例代码详解

当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination 分页,使用Pagination 快速完成分页功能最终效果展示 <div class="deit"> <div class="crumbs"> &l
使用ElementUI写一个前端分页查询的实例

目录前言前端分页查询写在最后前言一般我们在做项目的时候,都是通过调用后台接口去做增删改查,但是也有例外,有些某些特定场景下,会让前端去做好增删改查. 那么我们今天就来做一下这个需求. 使用的框架是Vue,UI框架是使用率很高的ElementUI. 那么我们开干吧. 前端分页假定我们的数据是通过点击一个添加按钮,弹出一个添加弹窗,输入好数据后,点击确定按钮,把数据保存到表格中去. 那么就是这样的 { data () { return { page: { pageOffset: 1,
以BootStrap Tab为例写一个前端组件

介绍本文以Bootstrap标签页组件为例,介绍如何编写或者封装一个前端组件,以下是实现效果: 原生的Bootstrap-tab组件主要有html,css组成,开发者使用时,需要写很多代码,不易于使用,对bootstrap-tab封装后,可以更方便地使用,同时提供关闭.增加tab页.指定当前选中页.即使加载等功能,这样组件可以适配更多的场景. 原生bootstrap-tab组件使用可参考https://www.runoob.com/bootstrap/bootstrap-tab-plugin.
Oracle分页查询的实例详解

Oracle分页查询的实例详解 1.Oracle分页查询: SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM tab) A WHERE ROWNUM <= 40 ) WHERE RN >= 21; 这个分页比下面的执行时间少,效率高. 2. select * from (select c.*,rownum rn from tab c) where rn between 21 and 40 对比这两种写法,绝大多数的情况下,第一个
ssm实现分页查询的实例

ssm整合实现分页查询一.通过limit查询语句实现分页,并展示 1.mapper.xml配置 <select id="selectUsersByPage" parameterType="int" resultMap="UserMap"> SELECT * number from user limit #{page},10 </select> 查询user表,从第page项开始,每次返回10条数据 2.index.jsp
使用Vue.js和Element-UI做一个简单登录页面的实例

最近了解到Vue.js挺火的,有同学已经学习了,那我心里痒痒的也学习了一点,然后也学了一点Element组件,就做了简单的登录页面. 效果很简单: 代码如下: 前端页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" hr
oracle+mybatis-plus+springboot实现分页查询的实例

今天蠢了一上午才弄出这玩意,话不多说上代码! 1.建一个配置类 package com.sie.demo.config; import com.baomidou.mybatisplus.annotation.DbType; import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor; import com.baomidou.mybatisplus.extension.plugins.PaginationInte
通过vue写一个瀑布流插件代码实例

这篇文章主要介绍了通过vue写一个瀑布流插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下效果如图所示: 采用了预先加载图片,再计算高度的办法..网络差的情况下,可能有点卡新建 vue-water-easy.vue 组件文件 <template> <div class="vue-water-easy" ref="waterWrap"> <div v-for="(i
python写一个随机点名软件的实例

最近有个随机点名软件的需求,故写了一个,上代码:github地址 # -*- coding: utf-8 -*- # @Time : 18-12-31 下午4:21 # @Author : Felix Wang from tkinter import * import tkinter.font as tkFont import random import gc import os, sys import chardet import copy from threading import Thre
TypeScript手写一个简单的eslint插件实例

目录引言前置知识第一个eslint规则:no-console 本地测试本地查看效果 no-console规则添加功能:排除用户指定的文件发布npm包引言看到参考链接1以后,觉得用TS写一个eslint插件应该很简单⌨️,尝试下来确实如此. 前置知识本文假设你对AST遍历有所了解. 你写过单测用例. 第一个eslint规则:no-console 为了简单,我们只使用tsc进行构建.首先package.json需要设置入口"main": "dist/index.
EasyUi+Spring Data 实现按条件分页查询的实例代码

Spring data 介绍 Spring data 出现目的为了简化.统一持久层各种实现技术 API ,所以 spring data 提供一套标准 API 和不同持久层整合技术实现 . 自己开发 Repository 只需要继承 JpaRepository 接口CrudRepository save. delete. deteleAll. findAll. findOne. count PagingAndSortingRepository findAll(Sort) 基于排序的查询.

使用ElementUI写一个前端分页查询的实例

目录

前言

前端分页

查询

写在最后

相关推荐

随机推荐