I’m working with vuejs and quasar and I find something. In this component Im using quasar table with multiple selection The header selection is not working as expected. I’m trying to exclude rows with a specified value for ‘deleted’, but the ‘selectAll’ value always evaluates to true. So, when I attempt to deselect all the rows, it doesn’t happen. logging selectAll always gives true.
<template>
<q-table
class="invoices-sticky-header-table"
:rows="filteredInvoices"
:columns="columns"
row-key="invoiceId"
:rows-per-page-options="rowsPerPageOptions"
:selected-rows-label="getSelectedString"
:pagination="pagination"
binary-state-sort
selection="multiple"
v-model:selected="selectedRows"
@update:selected="OnSelectedRowsChangedHandler"
>
<template v-slot:header-selection="props">
<q-checkbox
:model-value="props.selected"
@update:model-value="
(val, evt) => {
props.selected = val;
selectFilteredInvoices(val, evt);
}
"
/>
</template>
</q-table>
</template>
<script lang="ts">
import { type PropType, ref, defineComponent } from "vue";
import type { Invoice, VendorBasic } from "../../interfaces";
export default defineComponent({
name: "InvoiceTable",
props: {
filteredInvoices: { type: Object as PropType<Invoice[]>, required: true },
vendors: { type: Object as PropType<VendorBasic[]>, required: true },
maxInvoicesForBulkActions: {
type: Object as PropType<number>,
required: true,
},
},
emits: ["onPaid", "onApprove", "onDelete", "onSelectedRowsChanged"],
setup(props, { emit }) {
const selectedRows = ref<Invoice[]>([]);
function formatDateTime(dateTimeString: string) {
if (!dateTimeString) {
return dateTimeString;
}
const newDate = new Date(dateTimeString);
return (
newDate.toLocaleDateString("en-GB", {
day: "2-digit",
month: "short",
year: "numeric",
}) +
", " +
newDate
.toLocaleTimeString("en-GB", {
hour: "2-digit",
minute: "2-digit",
hour12: true,
})
.toUpperCase()
);
}
const onDeleteHandler = (invoiceId: number) => {
emit("onDelete", invoiceId);
};
const onApproveHandler = (invoice: Invoice) => {
emit("onApprove", invoice);
};
const onPaidHandler = (invoice: Invoice) => {
emit("onPaid", invoice);
};
const OnSelectedRowsChangedHandler = (rows: readonly any[]) => {
emit("onSelectedRowsChanged", rows);
};
const getSelectedString = (numberOfRows: number) => {
let message = `${numberOfRows} rows are selected. Bulk actions are available for maximum 5.`;
if (numberOfRows > props.maxInvoicesForBulkActions) {
message = `${message} Please unselect some.`;
}
return message;
};
const rowsPerPageOptions = ref<number[]>([100, 200, 500]);
const columns = [
{
name: "id",
align: <"left" | "right" | "center">"center",
label: "Id",
field: (row: Invoice) => row.invoiceId,
sortable: true,
},
{
name: "code",
align: <"left" | "right" | "center">"center",
label: "Code",
field: (row: Invoice) => row.invoiceCode,
sortable: true,
},
{
name: "url",
align: <"left" | "right" | "center">"center",
label: "File URL",
field: (row: Invoice) => {},
sortable: true,
},
{
name: "vendorName",
label: "Vendor",
align: <"left" | "right" | "center">"left",
field: (row: Invoice) =>
props.vendors
?.find((v: VendorBasic) => v.vendorId == row.vendorId)
?.username.split("(")[0]
.trim(),
sortable: true,
},
{
name: "creationDate",
label: "Creation Date",
align: <"left" | "right" | "center">"left",
field: (row: Invoice) => formatDateTime(row.created),
sortable: true,
},
{
name: "invoiceTotal",
label: "Total",
align: <"left" | "right" | "center">"left",
field: (row: Invoice) => row.invoiceTotal,
sortable: false,
},
{
name: "approved",
align: <"left" | "right" | "center">"center",
label: "Approved",
field: () => {},
},
{
name: "paid",
align: <"left" | "right" | "center">"center",
label: "Paid",
field: () => {},
},
{
name: "deleted",
align: <"left" | "right" | "center">"center",
label: "Deleted",
field: () => {},
},
];
const pagination = {
rowsPerPage: 200,
sortBy: "id",
descending: true,
};
const selectFilteredInvoices = (selectAll: boolean, evt: any) => {
console.log(selectAll);
if (selectAll) {
selectedRows.value = props.filteredInvoices.filter(
(row) => !row.deleted
);
} else {
console.log("hello reached");
selectedRows.value = [];
}
};
return {
selectFilteredInvoices,
formatDateTime,
columns,
pagination,
rowsPerPageOptions,
onDeleteHandler,
onPaidHandler,
onApproveHandler,
getSelectedString,
OnSelectedRowsChangedHandler,
selectedRows,
};
},
});
</script>
<style lang="sass" scoped>
.button-table
font-size: 10px
.date-text
margin: 0px
</style>
Commetting this piece of code concerning filtering the selectedRows make the selectAll change its value so this line is the problem,
selectedRows.value = props.filteredInvoices.filter(
(row) => !row.deleted