VUE2+Element 纯前端实现条件查询及分页功能

在开发中遇到后端分页不方便时，采用纯前端分页，较为简单，查询返回结果好事较短！

一、table的data直接绑定整个对象，纯前端分页功能实现

    <el-table
      :data="ExcelData.slice((page - 1) * pageSize, page * pageSize)"
      border=""
      :header-cell-style="headerCellStyle"
      height="400"
      class="detailTable"
    >
      <el-table-column
        prop="pnum"
        :label="$t('responsiblePerson')"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="number"
        :label="$t('quantity')"
        align="center"
      ></el-table-column>
    </el-table>

二、element 分页插件

1.html代码

<el-pagination
      background
      :current-page="page"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>

2.分页切换时方法

handleSizeChange(val) {
    this.pageSize = val
},
handleCurrentChange(val) {
    this.page = val
},

三、使用filter前端过滤条件查询信息

1.存完整的临时数据

（此处根据需求自定义，可每次调接口获取，也可页面加载时直接获取一次，方便后续过滤保障原数据的完整）

this.ExcelData = this.tempDate

2.前端过滤条件查询信息

getList() {
    //保证每次调用方法时，拿到的数据是最初始的list
    this.ExcelData = this.tempDate
    //前端过滤条件查询信息
    let list = this.ExcelData.filter((data) =>!this.empNO || data.pnum.toLowerCase().includes(this.empNO.toLowerCase()))
     // console.log('list条件查询后为=', list)
     //二次赋值
     this.ExcelData = list
     // console.log('this.userInfo最终赋值为=', this.ExcelData)
     list.filter((item, index) =>index < this.page * this.pageSize &&index >= this.pageSize * (this.page - 1))
    //获取新的total值
     this.total = list.length
},

四、搜索栏以及分页调用getList()

1.搜索栏绑定handleSearch方法

    <el-input
      v-model="empNO"
      :placeholder="$t('responsiblePerson')"
      style="width: 180px; margin-right: 10px"
      @input="handleSearch"
    ></el-input>
    <el-button type="primary" icon="el-icon-empNO" @click="handleSearch">
      {{ $t('search') }}
    </el-button>

2.搜索分页分别调用getList()

//pageSize变化时
handleSizeChange(val) {
    this.pageSize = val
    this.getList()
},
//page变化时
handleCurrentChange(val) {
    this.page = val
    this.getList()
},
//搜索
handleSearch() {
    this.page = 1
    this.getList()
},

五、完整代码

1.html部分主要代码

    <el-input
      v-model="empNO"
      :placeholder="$t('responsiblePerson')"
      style="width: 180px; margin-right: 10px"
      @input="handleSearch"
    ></el-input>
    <el-button type="primary" icon="el-icon-empNO" @click="handleSearch">
      {{ $t('search') }}
    </el-button>
    <el-table
      :data="ExcelData.slice((page - 1) * pageSize, page * pageSize)"
      border=""
      :header-cell-style="headerCellStyle"
      height="400"
      class="detailTable"
    >
      <el-table-column
        prop="pnum"
        :label="$t('responsiblePerson')"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="number"
        :label="$t('quantity')"
        align="center"
      ></el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="page"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>

2.js部分主要代码

export default {
    data() {
      return {
        empNO: '',
        paseDetailVisible: false,
        ExcelData: [],
        tempDate: [],
        page: 1,
        pageSize: 20,
        total: 0,
      }
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.page = val
        this.getList()
      },
      getList() {
        this.ExcelData = this.tempDate
        //前端过滤条件查询信息
        let list = this.ExcelData.filter(
          (data) =>
            !this.empNO ||
            data.pnum.toLowerCase().includes(this.empNO.toLowerCase())
        )
        // console.log('list条件查询后为=', list)
        //二次赋值
        this.ExcelData = list
        // console.log('this.userInfo最终赋值为=', this.ExcelData)
        list.filter(
          (item, index) =>
            index < this.page * this.pageSize &&
            index >= this.pageSize * (this.page - 1)
        )
        this.total = list.length
      },
      handleSearch() {
        this.page = 1
        this.getList()
      },
    },
  }
</script>

注意事项：

1.若每次过滤时不是重新调取接口获取完整信息的情况，请一定要在页面初始化的时候将原数据cope一份，保证后续filter过滤是原数据！

2.若页面为弹窗，请关闭时将搜索框數據清空