使用Element UI实现前端分页，前端搜索，及el-table表格跨页选择数据，切换分页保留分页数据，限制多选数量

文章目录

一、前端分页

在现代Web应用中，数据量庞大，一次性加载所有数据，不仅会增加页面加载时间，还会消耗过多的网络资源和客户端内存。因此，分页技术成为了优化用户体验和提高性能的关键手段之一。

而作为一名前端开发，分页功能我们经常会用到，而且有时候，后端会把数据一次性给我们，需要我们自己处理数据，做前端分页。使用Element UI实现前端分页是一项常见的需求。Element UI提供了一个方便的 Pagination 组件，可以用来实现分页功能。以下是一个简单的示例，展示了如何实现前端分页。

1、模板部分 (<template>)

• 使用el-table展示当前页的数据。
• 使用el-pagination组件实现分页控件，绑定相关属性和事件。

<el-table:data="currentPageData"style="width: 100%"><el-table-columnprop="id"label="id"width="180"></el-table-column><el-table-columnprop="name"label="Name"width="180"></el-table-column><el-table-columnprop="value"label="value"></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[10, 20, 30, 40, 50]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="tableData.length"style="text-align: right;margin-top: 20px;"></el-pagination>

2、数据部分 (data)

• tableData：包含所有数据的数组。
• currentPage：当前页码。
• pageSize：每页显示的数据条数。

data(){return{
      tableData:[{"id":1,"name":"名字1","value":1},{"id":2,"name":"名字2","value":2},{"id":3,"name":"名字3","value":3},{"id":4,"name":"名字4","value":4},{"id":5,"name":"名字5","value":5},{"id":6,"name":"名字6","value":6},{"id":7,"name":"名字7","value":7},{"id":8,"name":"名字8","value":8},{"id":9,"name":"名字9","value":9},{"id":10,"name":"名字10","value":10},{"id":11,"name":"名字11","value":11},{"id":12,"name":"名字12","value":12},{"id":13,"name":"名字13","value":13},{"id":14,"name":"名字14","value":14},{"id":15,"name":"名字15","value":15},{"id":16,"name":"名字16","value":16},{"id":17,"name":"名字17","value":17},{"id":18,"name":"名字18","value":18},{"id":19,"name":"名字19","value":19},{"id":20,"name":"名字20","value":20},{"id":21,"name":"名字21","value":21},{"id":22,"name":"名字22","value":22},{"id":23,"name":"名字23","value":23},{"id":24,"name":"名字24","value":24},{"id":25,"name":"名字25","value":25},{"id":26,"name":"名字26","value":26},{"id":27,"name":"名字27","value":27},{"id":28,"name":"名字28","value":28},{"id":29,"name":"名字29","value":29},{"id":30,"name":"名字30","value":30},{"id":31,"name":"名字31","value":31},{"id":32,"name":"名字32","value":32},{"id":33,"name":"名字33","value":33},{"id":34,"name":"名字34","value":34},{"id":35,"name":"名字35","value":35},{"id":36,"name":"名字36","value":36},{"id":37,"name":"名字37","value":37},{"id":38,"name":"名字38","value":38},{"id":39,"name":"名字39","value":39},{"id":40,"name":"名字40","value":40},{"id":41,"name":"名字41","value":41},{"id":42,"name":"名字42","value":42},{"id":43,"name":"名字43","value":43},{"id":44,"name":"名字44","value":44},{"id":45,"name":"名字45","value":45},{"id":46,"name":"名字46","value":46},{"id":47,"name":"名字47","value":47},{"id":48,"name":"名字48","value":48},{"id":49,"name":"名字49","value":49},{"id":50,"name":"名字50","value":50},{"id":51,"name":"名字51","value":51},{"id":52,"name":"名字52","value":52},{"id":53,"name":"名字53","value":53},{"id":54,"name":"名字54","value":54},{"id":55,"name":"名字55","value":55},{"id":56,"name":"名字56","value":56},{"id":57,"name":"名字57","value":57},{"id":58,"name":"名字58","value":58},{"id":59,"name":"名字59","value":59},{"id":60,"name":"名字60","value":60},{"id":61,"name":"名字61","value":61},{"id":62,"name":"名字62","value":62},{"id":63,"name":"名字63","value":63},{"id":64,"name":"名字64","value":64},{"id":65,"name":"名字65","value":65},{"id":66,"name":"名字66","value":66},{"id":67,"name":"名字67","value":67},{"id":68,"name":"名字68","value":68},{"id":69,"name":"名字69","value":69},{"id":70,"name":"名字70","value":70},{"id":71,"name":"名字71","value":71},{"id":72,"name":"名字72","value":72},{"id":73,"name":"名字73","value":73},{"id":74,"name":"名字74","value":74},{"id":75,"name":"名字75","value":75},{"id":76,"name":"名字76","value":76},{"id":77,"name":"名字77","value":77},{"id":78,"name":"名字78","value":78},{"id":79,"name":"名字79","value":79},{"id":80,"name":"名字80","value":80},{"id":81,"name":"名字81","value":81},{"id":82,"name":"名字82","value":82},{"id":83,"name":"名字83","value":83},{"id":84,"name":"名字84","value":84},{"id":85,"name":"名字85","value":85},{"id":86,"name":"名字86","value":86},{"id":87,"name":"名字87","value":87},{"id":88,"name":"名字88","value":88},{"id":89,"name":"名字89","value":89},{"id":90,"name":"名字90","value":90},{"id":91,"name":"名字91","value":91},{"id":92,"name":"名字92","value":92},{"id":93,"name":"名字93","value":93},{"id":94,"name":"名字94","value":94},{"id":95,"name":"名字95","value":95},{"id":96,"name":"名字96","value":96},{"id":97,"name":"名字97","value":97},{"id":98,"name":"名字98","value":98},{"id":99,"name":"名字99","value":99},{"id":100,"name":"名字100","value":100},{"id":101,"name":"名字101","value":101},{"id":102,"name":"名字102","value":102},{"id":103,"name":"名字103","value":103},{"id":104,"name":"名字104","value":104},{"id":105,"name":"名字105","value":105},{"id":106,"name":"名字106","value":106},{"id":107,"name":"名字107","value":107},{"id":108,"name":"名字108","value":108},{"id":109,"name":"名字109","value":109},{"id":110,"name":"名字110","value":110},{"id":111,"name":"名字111","value":111},{"id":112,"name":"名字112","value":112},{"id":113,"name":"名字113","value":113},{"id":114,"name":"名字114","value":114},{"id":115,"name":"名字115","value":115},{"id":116,"name":"名字116","value":116},{"id":117,"name":"名字117","value":117},{"id":118,"name":"名字118","value":118},{"id":119,"name":"名字119","value":119},{"id":120,"name":"名字120","value":120},{"id":121,"name":"名字121","value":121},{"id":122,"name":"名字122","value":122},{"id":123,"name":"名字123","value":123},{"id":124,"name":"名字124","value":124},{"id":125,"name":"名字125","value":125},{"id":126,"name":"名字126","value":126},{"id":127,"name":"名字127","value":127},{"id":128,"name":"名字128","value":128},{"id":129,"name":"名字129","value":129},{"id":130,"name":"名字130","value":130},{"id":131,"name":"名字131","value":131},{"id":132,"name":"名字132","value":132},{"id":133,"name":"名字133","value":133},{"id":134,"name":"名字134","value":134},{"id":135,"name":"名字135","value":135},{"id":136,"name":"名字136","value":136},{"id":137,"name":"名字137","value":137},{"id":138,"name":"名字138","value":138},{"id":139,"name":"名字139","value":139},{"id":140,"name":"名字140","value":140},{"id":141,"name":"名字141","value":141},{"id":142,"name":"名字142","value":142},{"id":143,"name":"名字143","value":143},{"id":144,"name":"名字144","value":144},{"id":145,"name":"名字145","value":145},{"id":146,"name":"名字146","value":146},{"id":147,"name":"名字147","value":147},{"id":148,"name":"名字148","value":148},{"id":149,"name":"名字149","value":149},{"id":150,"name":"名字150","value":150},{"id":151,"name":"名字151","value":151},{"id":152,"name":"名字152","value":152},{"id":153,"name":"名字153","value":153},{"id":154,"name":"名字154","value":154},{"id":155,"name":"名字155","value":155},{"id":156,"name":"名字156","value":156},{"id":157,"name":"名字157","value":157},{"id":158,"name":"名字158","value":158},{"id":159,"name":"名字159","value":159},{"id":160,"name":"名字160","value":160},{"id":161,"name":"名字161","value":161},{"id":162,"name":"名字162","value":162},{"id":163,"name":"名字163","value":163},{"id":164,"name":"名字164","value":164},{"id":165,"name":"名字165","value":165},{"id":166,"name":"名字166","value":166},{"id":167,"name":"名字167","value":167},{"id":168,"name":"名字168","value":168},{"id":169,"name":"名字169","value":169},{"id":170,"name":"名字170","value":170},{"id":171,"name":"名字171","value":171},{"id":172,"name":"名字172","value":172},{"id":173,"name":"名字173","value":173},{"id":174,"name":"名字174","value":174},{"id":175,"name":"名字175","value":175},{"id":176,"name":"名字176","value":176},{"id":177,"name":"名字177","value":177},{"id":178,"name":"名字178","value":178},{"id":179,"name":"名字179","value":179},{"id":180,"name":"名字180","value":180},{"id":181,"name":"名字181","value":181},{"id":182,"name":"名字182","value":182},{"id":183,"name":"名字183","value":183},{"id":184,"name":"名字184","value":184},{"id":185,"name":"名字185","value":185},{"id":186,"name":"名字186","value":186},{"id":187,"name":"名字187","value":187},{"id":188,"name":"名字188","value":188},{"id":189,"name":"名字189","value":189},{"id":190,"name":"名字190","value":190},{"id":191,"name":"名字191","value":191},{"id":192,"name":"名字192","value":192},{"id":193,"name":"名字193","value":193},{"id":194,"name":"名字194","value":194},{"id":195,"name":"名字195","value":195},{"id":196,"name":"名字196","value":196},{"id":197,"name":"名字197","value":197},{"id":198,"name":"名字198","value":198},{"id":199,"name":"名字199","value":199},{"id":200,"name":"名字200","value":200}],
      currentPage:1,// 当前页
      pageSize:10,// 每页多少条数据};},

3、计算属性 (computed)

• currentPageData：根据当前页码和每页条数计算当前页应该显示的数据。

computed:{//当前页数据currentPageData(){const start =(this.currentPage -1)*this.pageSize;const end =this.currentPage *this.pageSize;returnthis.tableData.slice(start, end);},},

4、方法 (methods)

• handleCurrentChange：当页码改变时触发，更新当前页码。
• handleSizeChange：当每页条数改变时触发，更新每页条数据。

methods:{// 当前页改变handleCurrentChange(page){this.currentPage = page;},// 每页条数改变handleSizeChange(val){this.pageSize = val;},}

二、前端搜索

实现数据搜索功能可以通过绑定输入框的值到搜索条件，并基于这个条件过滤数据来实现。以下是一个简单的示例，展示了如何在 Vue 组件中使用 Element UI 的输入框组件来实现数据搜索功能。

1、模板部分 (<template>)

使用 el-form 组件创建一个内联表单。
使用 el-form-item 和 el-input 组件创建名称搜索字段。
使用 el-form-item 和 el-select、el-option 组件创建类型搜索字段。
使用 el-button 组件创建搜索和重置按钮。

<!-- 搜索表单 --><el-forminline:model="searchForm"><el-form-itemlabel="名称"><el-inputv-model="searchForm.name"placeholder="请输入名称"clearable></el-input></el-form-item><el-form-itemlabel="类型"><el-selectv-model="searchForm.type"placeholder="请选择类型"clearable><el-optionlabel="分类1"value="1"></el-option><el-optionlabel="分类2"value="2"></el-option><el-optionlabel="分类3"value="3"></el-option><!-- 可以添加更多选项 --></el-select></el-form-item><!-- 可以添加更多搜索条件 --><el-form-item><el-buttontype="primary"@click="handleSearch">搜索</el-button><el-button@click="resetSearch">重置</el-button></el-form-item></el-form>

2、数据部分 (data)

• 维护一个搜索表单数据

data(){return{// 搜索表单数据
      searchForm:{
        name:'',
        type:'',},};},

3、计算属性 (computed)

• currentPageData：根据 searchForm 中的条件过滤 tableData数据，如果某个条件为空，则不对该条件进行过滤。然后根据当前页码和每页条数计算当前页应该显示的数据。

computed:{//当前页数据currentPageData(){const start =(this.currentPage -1)*this.pageSize;const end =this.currentPage *this.pageSize;returnthis.tableData.filter(item=>{return((!this.searchForm.name || item.name.toLowerCase().includes(this.searchForm.name.toLowerCase()))&&(!this.searchForm.type || item.value ===this.searchForm.type*1));}).slice(start, end);},},

4、方法 (methods)

• handleSearch：处理搜索的方法
• resetSearch：重置搜索表单的方法

// 处理搜索的方法（可选，因为已经绑定了 v-model 和 computed）handleSearch(){// 可以在这里执行额外的搜索逻辑，或者只是触发重新渲染（Vue 会自动处理）
      console.log('执行搜索：',this.searchForm);},// 重置搜索表单的方法resetSearch(){this.searchForm ={
        name:'',
        type:'',};},

三、跨页选择

Element UI是一款基于Vue.js的组件库，广泛应用于Web开发。在某些场景下，我们需要实现跨页全选功能，即用户在第一页选择了某些项后，切换到第二页时这些项仍然被选中。下面是一个简单的实现方法。

在Element UI中，我们可以使用el-table组件来展示表格数据，并使用el-table-column组件来定义列。为了实现跨页全选功能，我们需要使用el-table-column组件的type='selection’属性来创建一个选择框列。

我们将所有选中的项存储在变量中。这样，即使用户切换到其他页面，这些选中的项也不会被清除。

1、模板部分 (<template>)

• el-table绑定 row-key 属性 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
• el-table绑定 selection-change 事件 当选择项发生变化时会触发该事件
• 为每一行添加一个选择框selection列 实现多选非常简单: 手动添加一个el-table-column，设type属性为selection即可
• 将selection列设置reserve-selection=true 仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）

<el-table:data="currentPageData"row-key="id"style="width: 100%"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55":reserve-selection="true"></el-table-column><el-table-columnprop="id"label="id"width="180"></el-table-column><el-table-columnprop="name"label="Name"width="180"></el-table-column><el-table-columnprop="value"label="value"></el-table-column></el-table>

2、数据部分 (data)

• 维护一个选中行的数组 创建一个新的数组（例如selectedRows）来存储所有被选中的行的ID或唯一标识。这个数组将跨页存储所有选中的项。

data(){return{
      selectedRows:[],// 存储选中行的数组};},

3、方法 (methods)

• handleSelectionChange：当用户选中或取消选中某行时更新selectedItems数组

methods:{// 更新选中项的数组handleSelectionChange(val){this.selectedRows = val.map(item=> item);},}

四、限制数量

在 Element UI 的 组件中，限制多选数量可以通过监听 selection-change 事件来实现。以下是一个详细的步骤和示例代码，展示了如何在 Vue 组件中限制 的多选数量。以及限制复选框CheckBox 是否可以勾选。

1、模板部分 (<template>)

• 增加 selectable 属性 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
• 增加 ref=“multipleTable”

<el-table:data="currentPageData"ref="multipleTable"row-key="id"style="width: 100%"@selection-change="handleSelectionChange"><el-table-columntype="selection"width="55":reserve-selection="true":selectable="isSelectable"></el-table-column><el-table-columnprop="id"label="id"width="180"></el-table-column><el-table-columnprop="name"label="Name"width="180"></el-table-column><el-table-columnprop="value"label="value"></el-table-column></el-table>

2、数据部分 (data)

• 维护一个最大选择数量

data(){return{
      maxSelection:15,// 最大选择数量};},

3、方法 (methods)

• handleSelectionChange：当用户选中或取消选中某行时更新selectedItems数组 增加最大选择判断，如果点全选按钮，则截取数组，只取前面this.maxSelection条数据，多余部分取消选中
• toggleSelection：取消选择
• isSelectable：是否可选 用来决定这一行的 CheckBox 是否可以勾选

methods:{// 判断是否超过最大选择数量if(val.length >this.maxSelection){// 清除提示this.$message.closeAll()// 提示this.$message({
          message:`最多选择${this.maxSelection}条哦`,
          type:"warning"})}// 截取数组，只取前面this.maxSelection条数据let newArr = val.splice(0,this.maxSelection)// 更新选中行数组this.selectedRows = newArr.map(row=> row);this.$nextTick(()=>{// 取消选择this.toggleSelection(val)})// 取消选择toggleSelection(rows){
      rows.forEach(row=>{this.$refs.multipleTable.toggleRowSelection(row,false);});},// 是否可选isSelectable(row, index){// 未超过最大选择条数if(this.selectedRows.length <this.maxSelection){returntrue;}else{// 超过最大选择条数let ids =this.selectedRows.map((item)=> item.id);//判断当前行的唯一标识符 id，是否存在于已选数组中if(ids.includes(row.id)){// 已选择的行，可取消禁用returntrue;}else{// 超过最大选择条数，且当前行未被选中时，禁用returnfalse;}}}}

五、效果展示