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跳转和location.href的区别及说明

    Vue Router是Vue.js官方的路由管理器,它允许我们通过定义路由来管理应用程序的不同视图和状态,Vue路由跳转主要有以下几种方式:<router-link>标签、this.$router.push方法、this.$router.replace方法和this.$router.go方法
    2025-01-01
  • Vue中的百度地图定位BMap.GeolocationControl的用法

    Vue中的百度地图定位BMap.GeolocationControl的用法

    BMap.GeolocationControl 是百度地图API中的一个类,用于添加地理定位控件到地图上,以便用户可以通过该控件获取自己的当前位置,本文给大家介绍Vue中的百度地图定位BMap.GeolocationControl的用法,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • vue插件mescroll.js实现移动端上拉加载和下拉刷新

    vue插件mescroll.js实现移动端上拉加载和下拉刷新

    这篇文章主要介绍了vue插件mescroll.js实现移动端上拉加载和下拉刷新,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • Vue 基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解

    Vue 基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解

    计算属性就是 Vue 实例选项中的 computed,computed 的值是一个对象类型,对象中的属性值为函数,而且这个函数没办法接收参数,这篇文章主要介绍了Vue 基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解,需要的朋友可以参考下
    2022-11-11
  • Vue中key的原理以及diff算法详解

    Vue中key的原理以及diff算法详解

    这篇文章主要介绍了Vue中key的原理以及diff算法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • 一文详解vue各种权限控制与管理实现思路

    一文详解vue各种权限控制与管理实现思路

    这篇文章主要为大家介绍了vue各种权限控制与管理的实现思路详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • VUE安装使用教程详解

    VUE安装使用教程详解

    这篇文章主要介绍了安装使用VUE的教程,本文给大家提到了遇到的问题原因分析及解决方法,需要的朋友可以参考下
    2019-06-06
  • Vue父子组件传值&自定义事件方式

    Vue父子组件传值&自定义事件方式

    这篇文章主要介绍了Vue父子组件传值&自定义事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue使用$attrs和$listeners多级组件嵌套传递数据

    vue使用$attrs和$listeners多级组件嵌套传递数据

    这篇文章主要为大家介绍了vue使用$attrs和$listeners多级组件嵌套传递数据示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • vue图片懒加载的两种方法详解

    vue图片懒加载的两种方法详解

    懒加载是一种网页优化技术,也被称为延迟加载,它的主要目的是在网页加载时,只加载当前可见区域内的内容,而延迟加载其他不可见区域的内容,从而提高网页的加载速度和性能,这篇文章主要介绍了vue图片懒加载的两种方法,需要的朋友可以参考下
    2023-07-07

最新评论