分页插件
当前位置:   article > 正文

vue element el-table实现前端搜索分页_element ui table分页 如何查找数据在哪一页

element ui table分页 如何查找数据在哪一页

项目一个需求,需要前端来分页并实现字段模糊匹配,使用以下方法,得以实现

搜索词

<el-input
              v-model="keyword"
              placeholder="输入要搜索的内容"
              clearable
              size="small"
            ><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

table

 <el-table
            v-loading="loading"
            :data="数据.filter(数据 => !搜索词 || 数据.匹配字段.toLowerCase().includes(搜索词.toLowerCase())).slice((页码-1)*页条数,页码*页条数)"
          >

  • 1
  • 2
  • 3
  • 4
  • 5

分页插件

<pagination v-show="rightConditionTotal>0" :total="数据.filter(数据 => !搜索词 || 数据.匹配字段.toLowerCase().includes(搜索词.toLowerCase())).slice((页码-1)*页条数,页码*页条数).length" :page.sync="rightConditionPageNum"
                      :limit.sync="dialogPageSize" layout="total, sizes, prev, pager, next"/>
  • 1
  • 2

在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/103085
推荐阅读
相关标签