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....知道有点蠢，但是我还没想到别的办法...

弹框：

搜索

清空

: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">

确定

取消

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中地址、时间等页面显示问题

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。