账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue element-ui 表格筛选存在分页时只能筛选当前页数据如何解决?
    58
    0

    vue element-ui el-table表格筛选存在分页时只能筛选当前页数据

    参考了一下https://segmentfault.com/q/10...

    但是描述有点不清晰,说的大概是是通过filter-change拿取当前筛选列以及筛选传递的value值,然后自定义filter.但是这样又怎么去改变表格数据tables以及页数呢

    相关代码

    //表格数据绑定tables为自定义compute筛选,筛选搜索框输入值
    :data="tables.slice((pageIndex-1)pageSize,pageIndexpageSize)"
    @filter-change="filterChange"

    //methods

    filterChange(a){

                    // console.log(a);  //Object { "el-table_3_column_28": (1) […] }
                    let tableData = this.classBook;
                    for(let i in a){
                        // console.log(i+':'+a[i])
                        return tableData.filter(dataNews => {
                            return String(dataNews[i]).toLowerCase().indexOf(a[i]) > -1
                        })
                    }
                    console.log('aaaaaa');  //无法打印
                    console.log(tableData); //无法打印
                    // return tableData;
                },
    
    

    //tables

    if (search) {

                        return tableData.filter(dataNews => {
                            return Object.keys(dataNews).some(key => {
                                return String(dataNews[key]).toLowerCase().indexOf(search) > -1
                            })
                        })
                    }
                    return tableData
    
    
    
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 微信昵称女繁体字 普通会员 1楼

      在 Vue Element UI 中,表格筛选器的分页功能是基于全局搜索的,也就是说,用户在筛选器中输入了关键词,Vue Element UI 会遍历所有表单项并查找与关键词匹配的数据。如果当前页数据已经超过了当前页的页数,那么筛选器将无法更新。

      要解决这个问题,您可以尝试以下方法:

      1. 使用懒加载:在表单项验证完成后,对筛选器进行分页。

      2. 使用分页插件:Vue Element UI 提供了一些内置的分页插件,例如:v-loading 和 v-page。您可以根据需要选择合适的插件。

      3. 使用路由分页:如果您希望用户可以从某个特定路由开始筛选,您可以使用路由分页。在这种情况下,您可以将筛选器与路由进行集成,例如:

      ```html

      ```

      handleRowClick 中,您可以处理筛选器中出现的分页事件,并根据分页状态更新筛选器。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部