mardi 24 août 2021

Quasar: Why is QCheckbox selected all in QTable?

I check only one checkbox, but all of the other checkboxs are also checked. It seems like all checkbox has the same index or id, however, there is no way to figure out to fix this issue. I have googled, but could not find the way I am looking for.

Here is the code I wrote

QTable

         <q-table
          id="selection-table"
          :title="undefined"
          :data="curData"
          :columns="columns"
          @request="updateTableData"
          :rows-per-page-options="[10, 20, 30, 40, 50]"
          :pagination.sync="pagination"
          :loading="isLoading"
          row-key="name"
          class="no-shadow q-pa-none"
          selection="multiple"
          :selected.sync="selected"
          :selected-rows-label="getSelectedString"
        >
          <template v-slot:body="props">
            <q-tr :props="props" class="q-pa-none">
              <q-td>
                <q-checkbox v-model="props.selected" />
                
              </q-td>
              <q-td
                v-for="col in props.cols"
                :key="col.name"
                :props="props"
                class="q-pa-none"
                row-key="name"
                :auto-width="col.name == 'title' ? false : true"
              >
                <span v-if="col.name === 'title'">
                  
                </span>
                <span v-else-if="col.name === 'status'">
                  <span v-if="col.value === 0">... </span>
                  <span
                    v-else-if="
                      col.value === 200 && props.goodsStatusCode === 11
                    "
                    >...</span
                  >
                  <span v-else>
                    <span class="text-red">...)</span>
                  </span>
                </span>
                <span v-else>  </span>
              </q-td>
            </q-tr>
          </template>
        </q-table>

Script

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  name: 'SelectionTable',
  data() {
    return {
      selected: [],
    };
  },
  methods: {
    getSelectedString() {
      return this.selected.length === 0
        ? ''
        : `${this.selected.length} record${
            this.selected.length > 1 ? 's' : ''
          } `;
    },
  },
});
</script>

Would you let me know what I am missing?




Aucun commentaire:

Enregistrer un commentaire