vue表格删除功能结合filter更新对象数组
// 删除表格某个数据
del(id) {
// 判断是多选还是单选
let delType = id instanceof Array
let length = 0
let changeId = ''
if(delType) {
// 多条
length = id.length
// 数组转字符串
changeId = id.join(',')
} else {
changeId = id
}
this.$confirm({
title: delType? `您确定要删除这${length}个站点吗？`: '您确定要删除该站点吗？',
content: '删除后不可恢复哦',
okText: '确定',
okType: 'danger',
cancelText: '取消',
onOk() {
/
/ 调⽤删除接⼝
delData(changeId)
.then(res => {
if(de === 0) {
// 删除成功更新数据
if(delType) {
// 如果是多选，遍历id数组
id.forEach(item => {
// 通过选中的id与原对象数组的id判断，不相同则留着
this.tableData = this.tableData.filter(it => it.id != item)
})
} else {
// 单选则直接把选中的id和原对象数组的id⽐较
this.tableData = this.tableData.filter(it => it.id != changeId)
}
}
})
},
onCancel() {
// 关闭提⽰
},
});
},
3、运⾏后保错：
4、修改的代码：
// 删除表格某个数据
del(id) {
// 解决报未定义的错
let that = this
// 判断是多选还是单选
let delType = id instanceof Array
let length = 0
let changeId = ''
if(delType) {
filter过滤对象数组
// 多条
length = id.length
// 数组转字符串
changeId = id.join(',')
} else {
changeId = id
}
that.$confirm({
title: delType? `您确定要删除这${length}个站点吗？`: '您确定要删除该站点吗？',        content: '删除后不可恢复哦',
okText: '确定',
okType: 'danger',
cancelText: '取消',
onOk() {
// 调⽤删除接⼝
delData(changeId)
.then(res => {
if(de === 0) {
// 删除成功更新数据
if(delType) {
// 如果是多选，遍历id数组
id.forEach(item => {
// 通过选中的id与原对象数组的id判断，不相同则留着
that.tableData = that.tableData.filter(it => it.id != item)
})
} else {
// 单选则直接把选中的id和原对象数组的id⽐较
that.tableData = that.tableData.filter(it => it.id != changeId)
}
}
})
},
onCancel() {
// 关闭提⽰
},
});
},
主要是增加了
let  that = this
只因热爱，愿迎万难

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。