先说需求：实时记录当前选中的分页中的列表，分页保存数据，然后在用选中的数据进行某些操作；PS:左下角的数字为记录的当前选中的列表的和

直接上可用的代码，前提已配置好各种环境

超文本标记语言部分

！-桌子组件需要使用ref=' table '-template div El-table : data=' table data ' ref=' table ' stripe style=' width : 100% ' @ selection-change=' handleSelectionChange ' El-table-column type=' selection ' width=' 55 '/El-table-column El-table-column prop=' name ' label='商品名称/El-table-column El-table-column prop='条形码'标签='商品编码/El-table-column El-table-column prop='数量'标签='区域总库存/El-table-column/El-table div class=' block ' v-show=' page。总页数10 ' El-分页@ current-change=' handleCurrentChange ' : current-page。sync='页面。当前页面' :页面大小='页面。pnum ' layout=' total，prev，page，page，next，jumper ' : total=' page。总页数'/El-分页/div { { multiple selection。长度} }/div/div部分

导出默认{ data(){ return { tableData:[]，//表格数据多重选择：[]，//所有选中的数据包含跨页数据multipleSelection:[]，//当前页选中的数据' idKey: '条形码',//标识列表数据中每一行的唯一键的名称第：页{ //每页数据量pnum:10，//数据总数pageTotal:0，//当前页，从一开始currentPage:1，} } }，方法： { handleCurrentChange(){ this。changepagecorerecorddata()；if(！这个$ isNull(这。佩奇。总页数))这一点。getgoodslist()；}，handleSelectionChange(val){ this。multipleselection=val//实时记录选中的数据setTimeout(()={ this。changepagecorerecorddata()；}，50) }，setSelectRow() { if(！这个。多重选择| |这个。多重选择。长度=0){ return；} //标识当前行的唯一键的名称让idKey=this.idKey让selectAllIds=[]；让那个=这个；这个。多重选择。foreach(row={ selectallids。push(行[IdKey])；})这个参考文献。桌子。ClearSelection()；for(var I=0；我喜欢这个。tabledata。长度；I){ if(selecta lids。indexof(此。tabledata[I][idKey])=0){//设置选中，记住桌子组件需要使用ref='table '这个参考文献。桌子。ToggleRowSelection(这。TableDATa[I]，true)；} } }, //记忆选择核心方法changePageCoreRecordData () { //标识当前行的唯一键的名称让idKey=this.idKey让那个=这个；//如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算如果(这个。多重选择。长度=0){ this。多重选择=这个。多重选择；返回；} //总选择里面的键集合让selectAllIds=[]；这个。多重选择。foreach(row={ selectallids。push(行[IdKey])；})让selectIds=[] //获取当前页选中的识别这个。多重选择。foreach(row={ selections。push(行[IdKey])；//如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里if(selecta lids。indexof(第[idKey]行)0){该。多重选择。推(排)；} })让noselectds=[]；//得到当前页没有选中的识别这个。tabledata。foreach(row={ if(selectids。indexof(行[idKey])0){ noselectids。push(行[IdKey])；} })n选择。foreach(id={ if(selectallid)。indexof(id)=0){ for(让I=0；我。多重选择长度；如果。多重选择[I][IdKey]==id){//如果总选择中有未被选中的，那么就删除这条那个。多重选择。拼接(，1)；打破；} } } }) }, //请求接口部分getGoodsList(){ let data={ }；数据[' page ']=这个。佩奇。当前页面；data[' pnum ']=this。佩奇。pnum这个$ Ajax({ URL : ’)商品/列表，data:data }).然后(val={ this。tabledata=val。数据。行吗？瓦尔。数据。行：[]；this.page={ pnum:10，pageTotal:val.data.total，currentPage:val.data.page，}；setTimeout(()={ this。setselectrow()；},50) }) }),创建了(){ this.getGoodsList() } }代码可直接粘贴到项目中使用，亲测可用，傻瓜式代码

以上这篇元素用户界面分页多选，翻页记忆的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。