最近有一个需求,点击添加按钮,弹出窗口(窗口显示多选、可翻页、可检索列表),选中多条信息,当我点击确定按钮,把选中信息显示在页面上;点击取消,选中信息不显示在页面上。再次打开,把在页面上的信息显示选中状态。
思路:一开始选用elementUI官网例子,使用selection-change,但是它只显示当前改变的选择,不能满足我翻页及检索后还能选中数据的问题
toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }
后来查询api,发现了另外2个api,页面上的存在本地字段 glht,列表上选中的存在本地字段 yglht.
每次要计算页面显示的数据是列表的第几条数据,直接把对象放里面并不会勾选我上传选中的数据。
emmm....知道有点蠢,但是我还没想到别的办法...
弹框:
<el-dialog class="contract_modal" title="信息" :visible.sync="glht_modal" width="80%" :modal="false" @close="cancel"> <el-form :inline="true" :model="searchData" label-width="90px"> <el-form-item label="名称:"> <el-input v-model.trim="searchData.mc_" size="small" class="contract_input"></el-input> </el-form-item> <span class="list_btns"> <el-button type="primary" size="small" @click="listSearch(page, 1)" class="con_btn">搜索</el-button> <el-button size="small" @click="searchData = {}" class="con_btn">清空</el-button> </span> </el-form> <div id="list_body" class="list-body" style="padding-left: 0;"> <el-table :data="tableData" stripe border style="width: 100%" max-height="480" ref="multipleTable" @select-all="handleSelectionAll" @select="handleSelectionChange"> <el-table-column type="selection" width="26" align="right"></el-table-column> <el-table-column type="index" width="50" label="序号" align="left" header-align="left"></el-table-column> <el-table-column prop="mc_" label="名称" width="180" show-overflow-tooltip align="left"></el-table-column> </el-table> <div class="list-pagination"> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page.page" :page-sizes="[10, 20, 50, 100]":page-size="page.pageCount" layout="total, sizes, prev, pager, next, jumper, ->" :total="page.total"></el-pagination> </div> </div> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="save" size="small">确定</el-button> <el-button @click="cancel" size="small">取消</el-button> </div> </el-dialog>
methods 里,全选时与选中单个时所做的操作:
// 全选 当val有数据,即为全选;为空数组,即为取消全选 handleSelectionAll (val) { // 获取所有选中的数据 this.records = JSON.parse(localStorage.getItem('glht')) if(val.length !== 0) { //全选 // this.records = Array.from(new Set(val.concat(this.records))) 发现去重不好用!只能手动push了 // 全选选中的一定是本页所有数据,所以循环本页 this.tableData.forEach((v) => { if(this.records.find((e,index) => { return v.id_ === e.id_})){}else { // 如果数组中没有就把选中的push进去 this.records.push(v) } }) } else { // 取消全选,在选中的所有信息中把本页列表有的删除 this.tableData.forEach((v) => { this.records.forEach((e,index) => { if (e.id_ === v.id_) { this.records.splice(index, 1) } }) }) } // 每次选的数据暂时存一下 localStorage.setItem('glht', JSON.stringify(this.records)) }, // 单选 handleSelectionChange(val, row) { // 获取所有选中的数据 this.records = JSON.parse(localStorage.getItem('glht')) if (this.records.length === 0) { // 还没有选中任何数据 this.records = [row] } else { if (this.records.filter(i => { return i.id_ === row.id_ }).length === 0) { // 已选中的数据里没有本条(取消),把这条加进来 this.records.push(row) } else { // 已选中的数据里有本条(取消选中),把这条删除 this.records.forEach((e,index) => { if (e.id_ === row.id_) { this.records.splice(index, 1) } }) } } // 每次选的数据暂时存一下 localStorage.setItem('glht', JSON.stringify(this.records)) },
methods 里,获取弹出框列表与选中数据:
listGet() { this.$axios.post("interface", {}, { params: searchData }).then(res => { if (res.data.success) { this.tableData = res.data.data.rows; this.page.total = res.data.data.total; this.records = JSON.parse(localStorage.getItem('yglht')) this.toggleSelection(JSON.parse(localStorage.getItem('yglht'))); // 反选操作 } else { this.$message.error(res.data.message) } }) .catch(err => console.log(err)); }, // 反选处理 toggleSelection(rows) { let arr =[] this.tableData.forEach((e, index) => { rows.forEach((i, ind) => { if (e.id_ === i.id_) { arr.push(this.tableData[index]) } }) }) if (arr) { this.$nextTick(() => { arr.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); }) } else { this.$refs.multipleTable.clearSelection(); } },
methods 里,保存与取消单个时所做的操作:
save () { this.glht_modal = false localStorage.setItem('yglht', localStorage.getItem('glht')) this.yglht() }, cancel () { this.glht_modal = false // 取消时 取在页面上的值 localStorage.setItem('glht', localStorage.getItem('yglht')) // this.toggleSelection(JSON.parse(localStorage.getItem('yglht'))); 直接写不好用 this.listGet({}) // 获取弹出框列表数据,这里调用一次是因为防止再次打开弹出框闪现之前选择的内容 this.yglht() }, yglht() { this.list = JSON.parse(localStorage.getItem('yglht')) // 处理this.list中地址、时间等页面显示问题 }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月16日
2024年11月16日
- 中国武警男声合唱团《辉煌之声1天路》[DTS-WAV分轨]
- 紫薇《旧曲新韵》[320K/MP3][175.29MB]
- 紫薇《旧曲新韵》[FLAC/分轨][550.18MB]
- 周深《反深代词》[先听版][320K/MP3][72.71MB]
- 李佳薇.2024-会发光的【黑籁音乐】【FLAC分轨】
- 后弦.2012-很有爱【天浩盛世】【WAV+CUE】
- 林俊吉.2012-将你惜命命【美华】【WAV+CUE】
- 晓雅《分享》DTS-WAV
- 黑鸭子2008-飞歌[首版][WAV+CUE]
- 黄乙玲1989-水泼落地难收回[日本天龙版][WAV+CUE]
- 周深《反深代词》[先听版][FLAC/分轨][310.97MB]
- 姜育恒1984《什么时候·串起又散落》台湾复刻版[WAV+CUE][1G]
- 那英《如今》引进版[WAV+CUE][1G]
- 蔡幸娟.1991-真的让我爱你吗【飞碟】【WAV+CUE】
- 群星.2024-好团圆电视剧原声带【TME】【FLAC分轨】