// 對象
obj: { name: "小明", age: 18 }
 
 
// 數(shù)組對象
arr: [{ name: "小王", age: 18 }, { name: "小張", age: 20 }]
// 普通數(shù)組
twoArr: [11, 22, 33]

// 對象
this.$set(this.obj, "name", "小劉")
console.log(this.obj) // obj={ name: "小劉", age: 18 }
 
 
// 數(shù)組對象
this.$set(this.arr, 1, { name: "小王", age: 19 })
console.log(this.arr) // arr=[{ name: "小王", age: 18 }, { name: "小王", age: 19 }]
// 普通數(shù)組
this.$set(this.twoArr, 0, 99)
console.log(this.twoArr) // twoArr=[99, 22, 33]

// 對象
this.$set(this.obj, "sex", "男")
console.log(this.obj) // obj={ name: "小明", age: 18, sex: "男" }
 
 
// 數(shù)組對象
const len = this.arr.length
this.$set(this.arr, len, { name: "小紫", age: 18 })
console.log(this.arr) // arr=[{ name: "小王", age: 18 }, { name: "小張", age: 20 }, { name: "小紫", age: 18 }]
// 普通數(shù)組
const len2 = this.twoArr.length
this.$set(this.twoArr, len2, 44)
console.log(this.twoArr) // twoArr=[11, 22, 33, 44]

this.$forceUpdate(); // 強制更新

updateForm() {
    this.formData.name = "張三";
    this.$forceUpdate(); // 強制更新
},

// 用于數(shù)組
this.recordList = [...this.recordList]
 
 
// 用于對象
this.recordObj = { ...this.recordObj }

<el-table :key="refreshTable" :data="tableData" border>
  <el-table-column type="index" label="序號" width="120" align="center" />
  <el-table-column prop="userName" label="姓名" align="center" />
  <el-table-column label="操作" width="200" align="center">
    <template slot-scope="scope">
      <el-button type="text" @click="toUpdate(scope.row)">修改</el-button>
      <el-button type="text" @click="toDel(scope.row, scope.$index)">刪除</el-button>
      <el-button type="text" @click="toDetail(scope.row)">詳情</el-button>
    </template>
  </el-table-column>
</el-table>

refreshTable: false, // 表格數(shù)據(jù)刷新標志

this.refreshTable = !this.refreshTable // 重新渲染表格