关键点
- 过滤:全量数据单独保存,增加计算属性根据过滤条件计算过滤后的表格数据tableData。
- 分页:增加一个计算属性pageData,根据当前页号currentPage和每页大小pageSize从表格数组里过滤出当前页的数据。分页条的总行数设为过滤后的数据的条数。
代码
<template>
<section >
<el-form :inline="true" :model="filters" @submit.native.prevent >
<el-form-item label="姓名" >
<el-input v-model="filters.name" placeholder="姓名" ></el-input >
</el-form-item >
</el-form>
<el-table :data="pageData" border style="width: 100%">