element ui分页多选,翻页记忆的实例
网络编程 2021-07-04 15:51www.168986.cn编程入门
今天长沙网络推广就为大家分享一篇element ui分页多选,翻页记忆的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
先说需求:实时记录当前选中的分页中的列表,分页保存数据,然后在用选中的数据进行某些操作;PS:左下角的数字为记录的当前选中的列表的和
直接上可用的代码,前提已配置好各种环境
HTML部分
<!--table组件需要使用ref="table"--> <template> <div> <el-table :data="tableData" 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="barcode" label="商品编码"></el-table-column> <el-table-column prop="quantity" label="区域总库存"></el-table-column> </el-table> <div class="block" v-show="page.pageTotal>10"> <el-pagination @current-change="handleCurrentChange" :current-page.sync="page.currentPage" :page-size="page.pnum" layout="total, prev, pager, next , jumper" :total="page.pageTotal"> </el-pagination> </div> <div> {{multipleSelectionAll.length}} </div> </div> </template>
JS部分
export default { data(){ return { tableData: [], // 表格数据 multipleSelectionAll:[],//所有选中的数据包含跨页数据 multipleSelection:[],// 当前页选中的数据 idKey: 'barcode', // 标识列表数据中每一行的唯一键的名称 page:{ //每页数据量 pnum:10, //数据总数 pageTotal:0, //当前页,从1开始 currentPage:1, } } }, methods: { handleCurrentChange(){ this.changePageCoreRecordData(); if(!this.$isNull(this.page.pageTotal)) this.getGoodsList(); }, handleSelectionChange (val) { this.multipleSelection = val; //实时记录选中的数据 setTimeout(()=>{ this.changePageCoreRecordData(); }, 50) }, setSelectRow() { if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) { return; } // 标识当前行的唯一键的名称 let idKey = this.idKey; let selectAllIds = []; let that = this; this.multipleSelectionAll.forEach(row=>{ selectAllIds.push(row[idKey]); }) this.$refs.table.clearSelection(); for(var i = 0; i < this.tableData.length; i++) { if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) { // 设置选中,记住table组件需要使用ref="table" this.$refs.table.toggleRowSelection(this.tableData[i], true); } } }, // 记忆选择核心方法 changePageCoreRecordData () { // 标识当前行的唯一键的名称 let idKey = this.idKey; let that = this; // 如果总记忆中还没有选择的数据,那么就直接取当前页选中的数据,不需要后面一系列计算 if (this.multipleSelectionAll.length <= 0) { this.multipleSelectionAll = this.multipleSelection; return; } // 总选择里面的key集合 let selectAllIds = []; this.multipleSelectionAll.forEach(row=>{ selectAllIds.push(row[idKey]); }) let selectIds = [] // 获取当前页选中的id this.multipleSelection.forEach(row=>{ selectIds.push(row[idKey]); // 如果总选择里面不包含当前页选中的数据,那么就加入到总选择集合里 if (selectAllIds.indexOf(row[idKey]) < 0) { that.multipleSelectionAll.push(row); } }) let noSelectIds = []; // 得到当前页没有选中的id this.tableData.forEach(row=>{ if (selectIds.indexOf(row[idKey]) < 0) { noSelectIds.push(row[idKey]); } }) noSelectIds.forEach(id=>{ if (selectAllIds.indexOf(id) >= 0) { for(let i = 0; i< that.multipleSelectionAll.length; i ++) { if (that.multipleSelectionAll[i][idKey] == id) { // 如果总选择中有未被选中的,那么就删除这条 that.multipleSelectionAll.splice(i, 1); break; } } } }) }, //请求接口部分 getGoodsList(){ let data = {}; data['page'] = this.page.currentPage; data['pnum'] = this.page.pnum; this.$ajax({ url:'goods/list', data:data }).then(val => { this.tableData = val.data.rows ? val.data.rows : []; this.page = { pnum:10, pageTotal:val.data.total, currentPage:val.data.page, }; setTimeout(()=>{ this.setSelectRow(); }, 50) }) } }, created () { this.getGoodsList() } }
代码可直接粘贴到项目中使用,亲测可用,傻瓜式代码
以上这篇element ui分页多选,翻页记忆的实例就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程