在 Quasar 中只影响所选行的 q-toggle 开关

2024-03-11 11:50:30

在 Quasar 中使用 v-model 解决 q-table 中 q-toggle 开关的影响范围问题

引言

在使用 Quasar 框架的 Vue.js 应用程序中，q-table 中的 q-toggle 开关通常会影响整个表中的所有数据行，即使我们只希望切换选定行的状态。本文旨在提供一个全面的解决方案，详细说明如何解决此问题，确保 q-toggle 开关只影响所选行，并保持模型驱动设计。

问题

默认情况下，q-toggle 开关使用与 v-model 相同的变量来跟踪所有行的状态。当用户切换开关时，它会更新这个变量，进而影响整个表中所有行的状态。然而，如果我们只希望切换所选行的状态，我们就需要创建一个单独的变量来跟踪选定行的 ID。

解决方案

要解决此问题，我们需要对 v-model 的使用方式以及 q-toggle click 事件处理程序中的代码进行一些修改。

1. 使用选定行的 ID 更新 v-model：

在 q-toggle 中，将 v-model 设置为 selectedRow.id，其中 selectedRow 是一个响应式变量，用于存储选定行的 ID。

2. 在 q-toggle click 事件处理程序中更新 selectedRow：

在 q-toggle 的 click 事件处理程序中，使用 selectedRow.value = props.row.id 来更新 selectedRow 的值。

示例代码：

<template>
  <q-table>
    <template v-slot:body-cell-actions="props">
      <q-toggle v-model="selectedRow.id" @click="toggleRowStatus(props.row.id)" />
    </template>
  </q-table>
</template>

<script>
export default {
  data() {
    return {
      selectedRow: null,
    };
  },
  methods: {
    toggleRowStatus(id) {
      this.selectedRow = id;
    },
  },
};
</script>