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>
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 the withDefaults()
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
and props.columns
directly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.