vue3 element 子表有两行数据当第一行数据的名称发生改变时候第一行数据的成绩改为1

首先，在子表的数据中添加一个属性来保存第一行数据的名称：

data() {
  return {
    tableData: [
      { name: 'Tom', score: 80 },
      { name: 'Jerry', score: 90 }
    ],
    firstRowName: 'Tom'
  }
}

然后，在模板中绑定第一行数据的名称和成绩，并监听名称的变化：

<template>
  <el-table :data="tableData">
    <el-table-column label="Name">
      <template slot-scope="scope">
        <el-input v-model="scope.row.name" v-if="scope.$index === 0" @change="handleChangeName"></el-input>
        <span v-else>{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="Score">
      <template slot-scope="scope">
        <span v-if="scope.$index === 0">{{ tableData[0].score }}</span>
        <span v-else>{{ scope.row.score }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

最后，在组件中添加handleChangeName方法来监听名称的变化，并将第一行数据的成绩改为1：

methods: {
  handleChangeName() {
    if (this.tableData[0].name !== this.firstRowName) {
      this.tableData[0].score = 1
    }
  }
}