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