<el-table v-loading="loading" :data="tableData" row-key="id">
      <el-table-column property="id" label="序號(hào)"></el-table-column>
      <el-table-column property="name" label="姓名">
        <template #default="scope">
          <el-input v-if="!scope.row.id" v-model="scope.row.name"></el-input>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column property="number" label="年齡">
        <template #default="scope">
          <el-input v-if="!scope.row.id" v-model="scope.row.number"></el-input>
          <span v-else>{{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="200">
        <template #default="scope">
          <el-button type="primary" size="small" v-if="!scope.row.id"  @click.stop="handleSave(scope.row)">保存</el-button>
          <el-button type="danger" size="small" v-if="scope.row.id" @click.stop="handleDelete(scope.row.id)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom-btn">
      <el-button type="success" @click="addLineData()">添加一行</el-button>
    </div>

/**添加一行數(shù)據(jù) */
function addLineData() {
  const newData = {
    name: '',
    number: '',
  };
  tableData.value.push(newData);
}
/** */
function handleDelete() {
  ElMessageBox.confirm("確認(rèn)刪除該條數(shù)據(jù)?", "警告", {
    confirmButtonText: "確定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    //調(diào)用自己的接口啦！
    // 當(dāng)然啦，如果全都是自己增加的未提交的數(shù)據(jù)，可以使用splice 方法來(lái)處理哦！
  });
}