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

作者站长头像
站长
· 阅读数 10

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

回复
1个回答
avatar
test
2024-07-03

你都有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>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容