使用elementUI怎么实现多选框反选
使用elementUI怎么实现多选框反选?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
专注于为中小企业提供成都网站制作、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业青田免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
思路:一开始选用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....知道有点蠢,但是我还没想到别的办法...
弹框:
搜索 清空 " :total="page.total"> 确定 取消
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中地址、时间等页面显示问题 }
关于使用elementUI怎么实现多选框反选问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。
网页名称:使用elementUI怎么实现多选框反选
标题URL:http://ybzwz.com/article/jcdsoi.html