I’m using vue 3 with quasar and I would to make a wrapper for q-table but how can I define rows without using any[].
It works like this but then whenever I use this component I’ll have to convert my object to unknown. Is there any better way? Or I should just turn off “no-explicit-any” and use any[]?
<template> <div> <q-table :rows="rows" :columns="columns" /> </div> </template> <script lang="ts" setup> import { computed } from 'vue'; import { QTableProps } from 'node_modules/quasar/dist/types/index'; interface Props { columns?: QTableProps['columns']; rows?: unknown[]; } const props = withDefaults(defineProps<Props>(), { rows: undefined }); const rows = computed(() => props.rows) const columns = computed(() => props.columns) </script>
Advertisement
Answer
QTable.rows
expects an array of objects, containing string keys and string/number values.
So rows
should be typed as:
interface Props { columns?: QTableProps['columns']; rows?: Record<string, string | number>[]; 👈 }
Side notes:
Specifying
undefined
as a default value is effectively the same as not specifying a default at all. You can remove thewithDefaults()
in your example.The computed props that just return the original props have no useful effect. You could remove these computed props, and just use
props.rows
andprops.columns
directly.