vue3+el-button，麻烦各位大佬指点一下？

Question

出现的bug就是，当我点击某一行的“预约”按钮时，调用接口，当接口返回的res.code=='00000' 时，应该是只改变当前点击行的按钮名称，现在时所有的按钮都发生改变。正确地应该是点击的那行按钮发生改变。其他的是不会发生变化的

Answer 1

你都有parkingSpaceStatus这个字段来表示状态了，直接修改这个值不就行了

<el-table-columns label="车位预约">
  <template #default="{row}">
    <el-button
      type="primary"
      size="mini" 
      :disabled="row.parkingSpaceStatus!='空闲'" 
      @click="DriveBooking(row)"
    >{{row.parkingSpaceStatus=='已预约'?'已预约':'预约'}}</el-button>
  </template>
</el-table-columns>
<script>
function DriveBooking(row) {
    // ...省略其他逻辑
    if(res.code == '00000') {
      // 这个枚举值看后端怎么定义你就保持一致就行
      // 话说难道没有int或code的枚举值吗，中文一般只在前端展示而已
      row.parkingSpaceStatus = '已预约' 
    }
}
</script>

Answer 2

你定义了个响应式变量typeBtn，然后在某个方法里改变了他的值，那自然用到的地方都改了啊。
你应该在scope里再加个预约状态，然后通过这个预约状态来判断按钮的显示名称，这样，每条记录都有自己独立的显示状态，自然就不会相互影响了

Answer 3

你肯定不能定义一个typeBtn，你定义了一个，那就是一个变量，你需要给拿到的数组每一个都定义的一个按钮状态，点那个修改那个的状态值。