使用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....知道有点蠢,但是我还没想到别的办法...
弹框:
<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" >
<el-table :data="tableData" stripe border 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中地址、时间等页面显示问题
}
关于使用elementUI怎么实现多选框反选问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。