vue中this.$set的使用

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 {

        }
      }
    },