vue对象和数组的增删改操作

刺骨的言语ヽ痛彻心扉 2022-09-13 04:25 177阅读 0赞

## 一、对象 ##

例：

tableList: { },

1、往对象里面添加属性：

tableList: { 
                        name1:[],
                        name2:[],
                        name3:[],
                    },

//给对象添加属性，比如tableList在加个name4,如果存在name4就是修改，不纯在就是增加了
    this.$set( tableList, "name4", [] )

2、给对象某个属性赋值，比如name1赋值：

// 新增一条空数据
      let newData = { 
       age: null,
       number: null
      };
     this.tableList[name1].push(newData)

或者可以这样赋值，这边是给name1赋值为\[\]

//给对象赋值
    Vue.set(this.tableList, name1, [])
    //给对象添加属性，比如tableList在加个name4,如果存在name4就是修改，不纯在就是增加了
    this.$set( tableList, "name4", [] )

**补充：**  
[vue中的vue.set()的使用][vue_vue.set]  
Vue.set( target, key, value ) / this.$set( target, key, value )  
target：要更改的数据源(可以是对象或者数组)  
key：要更改的具体数据  
value ：重新赋的值

3、删除对象属性,比如删除name1

//删除
     delete this.tableList[name1]

## 二、数组 ##

tabList: [{ 
                name: 'name1',
                label: '标签1'
               }, 
               { 
                name: 'name2',
                label: '标签2'
                }, 
                { 
                 name: 'name3',
                 label: '标签3'
    			}
    ],

1、新增

let newData = { 
                     name: this.valueOrg,
                     label: this.optionsOrg[i].label
          }
       
       this.tabList.push(newData);

2、删除，i就是下标，比如i=0的话就是删除数组第一条数据了

//根据下标删除数组
     this.tabList.splice(i, 1);

3、修改，比如数组第二条数据增加一个属性

this.$set(this.tabList[1], 'disabled', true);

修改完之后就变成这样了：

tabList: [{ 
                name: 'name1',
                label: '标签1'
               }, 
               { 
                name: 'name2',
                label: '标签2',
                disabled: true
                }, 
                { 
                 name: 'name3',
                 label: '标签3'
    			}
    ],

## 如果发现明明赋值了，但是好像值没有变化，这个时候可以试一下深度克隆 ##

// 通过深度克隆来使数据真的改变，之前是没有改变的
    tabList = JSON.parse(JSON.stringify(tabList))

[vue_vue.set]: https://www.cnblogs.com/sunmiao/p/14518494.html