vue数据更新了但在页面上没有显示出来的解决方法

// 对象
obj: { name: "小明", age: 18 }
 
 
// 数组对象
arr: [{ name: "小王", age: 18 }, { name: "小张", age: 20 }]
// 普通数组
twoArr: [11, 22, 33]

// 对象
this.$set(this.obj, "name", "小刘")
console.log(this.obj) // obj={ name: "小刘", age: 18 }
 
 
// 数组对象
this.$set(this.arr, 1, { name: "小王", age: 19 })
console.log(this.arr) // arr=[{ name: "小王", age: 18 }, { name: "小王", age: 19 }]
// 普通数组
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: "男" }
 
 
// 数组对象
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 }]
// 普通数组
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(); // 强制更新
},

// 用于数组
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, // 表格数据刷新标志

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