VUE數組根據索引刪除數據,頁面同時更新的實現方法

更新時間：2023年07月03日 09:08:52 作者：張康佳

這篇文章主要介紹了VUE數組根據索引刪除數據,頁面同時更新的實現方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

VUE數組根據索引刪除數據,頁面同時更新

項目場景

例如：

做了一個進制轉換的工具，點擊刪除的時候需要表格實時進行更新。

問題描述

例如：

嘗試了使用 this.$set 但是還是有問題。有時候會導致更新失敗

解決方案

最后查了一會資料發(fā)現

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)
    }

結果