VUE数组根据索引删除数据,页面同时更新的实现方法
作者：张康佳
这篇文章主要介绍了VUE数组根据索引删除数据,页面同时更新的实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
VUE数组根据索引删除数据,页面同时更新
项目场景
例如：
做了一个进制转换的工具，点击删除的时候需要表格实时进行更新。
问题描述
例如：
尝试了使用 this.$set 但是还是有问题。有时候会导致更新失败
解决方案
最后查了一会资料发现
this.tableData.splice(this.tableData.indexOf(index),1)
是最有效果的
代码如下：
// 删除某个记录
handleDelete(index, row) {
// 尝试的第一种方法：（这个是错误的！！！会导致有时候失效）
// let arr = this.tableData
// for(var i=index,len=arr.length-1;i<len;i++) {
// arr[i]=arr[i+1]
// }
// arr.length = len
// this.tableData = Object.assign({}, this.tableData, arr)
//this.tableData = arr
//this.$set(this.tableData, arr)
// 这样才有效果
this.tableData.splice(this.tableData.indexOf(index),1);
}VUE数组删除(对象)单条删除，多条删除
数组单行删除
<!--
* @Descripttion:单行删除
* @version: 0.0.1
* @Author: PengShuai
* @Date: 2022-06-01 17:30:04
* @LastEditors: PengShuai
* @LastEditTime: 2022-06-01 17:30:04
-->
// 数据源
demoData: [
{
id: '1',
name: '奥巴马',
},
{
id: '2',
name: '狗头',
},
{
id: '3',
name: '卢锡安',
},
{
id: '4',
name: '盖伦',
},
{
id: '5',
name: '赵信',
},
],
methods: {
demo() {
console.log('全部数据 5条')
console.log(this.demoData)
//? 单选
//! 删除单行数据
const del = '3'
this.demoData = this.demoData.filter((o) => {
return o.id !== del
})
console.log('删除单行所返回的数据 4条')
console.log(this.demoData)
},
},结果
数组多行删除(同一数据源)
<!--
* @Descripttion:单行删除
* @version: 0.0.1
* @Author: PengShuai
* @Date: 2022-06-09 14:17:04
* @LastEditors: PengShuai
* @LastEditTime: 2022-06-09 14:17:04
-->
demo() {
console.log('原数据')
console.log(this.demoData)
//? 多选
//! 删除多行数据
const selectData = [
{
id: '1',
name: '奥巴马',
},
{
id: '4',
name: '盖伦',
},
]
console.log('删除数据')
console.log(selectData)
let newData = this.demoData.filter(
(a) => !selectData.some((b) => a.id === b.id)
)
console.log('删除后数据')
console.log(newData)
}结果
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。