文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

前言

一般我们在做项目的时候,都是通过调用后台接口去做增删改查,但是也有例外,有些某些特定场景下,会让前端去做好增删改查. 那么我们今天就来做一下这个需求. 使用的框架是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)
        }
    }
}

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

查询

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

// 查询数据
// 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":"女"}]

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

写在最后

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

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯