this.$set原理講解

vue官方例項

this.$set的具體使用：table表格中需要更改表格中的值，還必須保證是響應式（雙向資料繫結）

這時候就可以考慮此方法 舉個栗子：$set，ant-design Of vue中表格的使用

vue元件中template標籤內

<div>
  <a @click="changeToEditStatus(record)" :disabled='isFormEdit'>更改</a>>
</div>

<a-table
  ref="table"
  bordered
  size="middle"
  :rowKey="recordKey"
  :columns="columns"
  :dataSource="dataSource"
  :pagination="ipagination"
  :loading="loading"
  @change="handleTableChange"
>
    <!-- 通過插槽插入到scopedSlots，實現點選開啟彈窗渲染內容至頁面 -->
  <template slot="classnameSlot" slot-scope="text, record" >
    <div v-if='record.isEdit==true'>
      <a-input placeholder="標題名稱" v-model="record.classname"></a-input>
    </div>
    <div v-else>{{ record.classname }}</div>
  </template>
</a-table>
 

export default data函式中

 columns:[
    ......
        {
          title: '標題名',
          dataIndex: 'classname',
          // align:'left',
          scopedSlots: {customRender: "classnameSlot"}
        },
    ......
  ]

methods事件中

    //進入編輯狀態
    changeToEditStatus(record){
      //禁用其它行的更改，刪除按鈕
      this.isFormEdit = true
      for(let i = 0;i<this.dataSource.length;i++){
        let item = this.dataSource[i]
        if (record.classid == item.classid){
          //給當前將要編輯物件中新增isEdit:true屬性，實現當前行進行可編輯狀態
          var newItem = Object.assign({isEdit:true},item)
          //呼叫方法：this.$set( target, key, value )
          // target：要更改的資料來源(可以是物件或者陣列) {Object | Array} target
          // key：要更改的具體資料                     {string | number} propertyName/index
          // value ：重新賦的值                       {any} value
          this.$set(this.dataSource,i,newItem)
        }else {

        }
      }
    },