VUE数组根据索引删除数据,页面同时更新的实现方法
更新时间:2023年07月03日 09:08:52 作者:张康佳
这篇文章主要介绍了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)
}结果

总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue-router跳转和location.href的区别及说明
Vue Router是Vue.js官方的路由管理器,它允许我们通过定义路由来管理应用程序的不同视图和状态,Vue路由跳转主要有以下几种方式:<router-link>标签、this.$router.push方法、this.$router.replace方法和this.$router.go方法2025-01-01
Vue中的百度地图定位BMap.GeolocationControl的用法
BMap.GeolocationControl 是百度地图API中的一个类,用于添加地理定位控件到地图上,以便用户可以通过该控件获取自己的当前位置,本文给大家介绍Vue中的百度地图定位BMap.GeolocationControl的用法,感兴趣的朋友跟随小编一起看看吧2023-10-10
vue插件mescroll.js实现移动端上拉加载和下拉刷新
这篇文章主要介绍了vue插件mescroll.js实现移动端上拉加载和下拉刷新,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-03-03
Vue 基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解
计算属性就是 Vue 实例选项中的 computed,computed 的值是一个对象类型,对象中的属性值为函数,而且这个函数没办法接收参数,这篇文章主要介绍了Vue 基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解,需要的朋友可以参考下2022-11-11
vue使用$attrs和$listeners多级组件嵌套传递数据
这篇文章主要为大家介绍了vue使用$attrs和$listeners多级组件嵌套传递数据示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08


最新评论