vue表格数据视图不更新解决

<template>
  <div>
    <el-table :data="tableData" :key="num">
      <el-table-column
        prop="name"
        label="名称"
        header-align="center"
        align="left"
        min-width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="字段">
        <template slot-scope="scope">
          <div style="display: flex">
            <el-input
              :disabled="!scope.row.editable"
              style="margin-right: 10px"
            ></el-input>
            <el-button
              @click="addData(tableData, scope.$index, scope.row)"
              type="text"
              >添加</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "fdqyQiYeJiBenXinXiAudit",
  data() {
    return {
      tableData: [],
      num: 0,
    };
  },
  methods: {
    //方法一，点击按钮加1
     addData(data, index, row){
        num++
     }

  },
};
</script>

方法二，用set方法更新

 // 方法二
  add(data, index, row){
    //两种都可以
      this.$set(data, index, row)
    //this.$set(this.tableData,index,row)
  }

方法三，利用数据变化，触发更新

 // 方法三 检测到数据变化，更新视图
    add(data, index, row) {
      this.data.splice(1, 0);
    },