[英]Vue 3 Typescript define unknown array of object
我将 vue 3 与 quasar 一起使用,我想为 q-table 制作一个包装器,但我如何在不使用任何 [] 的情况下定义行。
它是这样工作的,但是每当我使用这个组件时,我都必须将我的 object 转换为未知。 有没有更好的办法? 或者我应该关闭“no-explicit-any”并使用 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
需要一个对象数组,包含字符串键和字符串/数字值。
所以rows
应该输入为:
interface Props {
columns?: QTableProps['columns'];
rows?: Record<string, string | number>[]; 👈
}
旁注:
将undefined
指定为默认值实际上与根本不指定默认值相同。 您可以在示例中删除withDefaults()
。
仅返回原始道具的计算道具没有任何用处。 您可以删除这些计算道具,直接使用props.rows
和props.columns
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.