Vue.js
我想在vue3.x和typescirpt中使用动态地添加删除el-tabs的tab-pannel,但是报错
粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利
<template>
<el-tabs
v-model="editableTabsValue"
type="card"
tabPosition="left"
:closable="false"
@tab-remove="removeTab"
>
<el-tab-pane
v-for="(item, index) in editableTabs"
:key="item.name"
:closable="index > 1"
:label="item.title"
:name="item.name"
>
<Tables @checkDetail="handCheck" v-if="index < 2"></Tables>
<Detail v-else></Detail>
</el-tab-pane>
</el-tabs>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from "vue";
import Tables from "./components/table.vue";
import Detail from "./components/detail.vue";
export default defineComponent({
components: { Tables, Detail },
setup() {
const editableTabsValue = ref("-1");
const editableTabs = reactive([
{
title: "A",
name: "-1",
content: Tables,
},
{
title: "B",
name: "0",
content: Tables,
},
]);
const tabIndex = ref(2);
const addTab = () => {
let newTabName = ++tabIndex.value + "";
editableTabs.push({
title: "New Tab",
name: newTabName,
content: Detail,
});
editableTabsValue.value = newTabName;
};
const removeTab = (targetName: string) => {
// let tabs = editableTabs;
// let activeName = editableTabsValue.value;
// if (activeName === targetName) {
// tabs.forEach((tab, index) => {
// if (tab.name === targetName) {
// let nextTab = tabs[index + 1] || tabs[index - 1];
// if (nextTab) {
// activeName = nextTab.name;
// }
// }
// });
// }
// editableTabsValue.value = activeName;
// editableTabs = tabs.filter((tab: any) => tab.name !== targetName);
};
const handCheck = (scoped: any) => {
// if (editableTabs.findIndex((x) => x.name == scoped.id + "") < 0) {
// editableTabs.push({
// title: scoped.name,
// name: scoped.id + "",
// content: Detail,
// });
// }
// editableTabsValue.value = scoped.id + "";
};
return {
editableTabsValue,
editableTabs,
addTab,
removeTab,
handCheck,
};
},
});
</script>
错误是：
TS2322: Type 'DefineComponent<{}, { tabname: Ref<string>; user: Ref<{ identity: number; }>; handleClick: (tab: any) => void; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 4 more ..., {}>' is not assignable to type 'DefineComponent<{}, { tableData: Ref<{ id: number; name: string; }[]>; handleClick: (scope: any) => void; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 4 more ..., {}>'.
Type 'DefineComponent<{}, { tabname: Ref<string>; user: Ref<{ identity: number; }>; handleClick: (tab: any) => void; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 4 more ..., {}>' is not assignable to type 'ComponentPublicInstanceConstructor<{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<{} & {} & {}> & { onCheckDetail?: ((...args: any[]) => any) | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Func...'.
Type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<({} & (Readonly<{} & {} & {}> & ({ [x: string & `on${string}`]: ((...args: any[]) => any) | undefined; } | { ...; }))) & (VNodeProps & ... 3 more ... & ({ ...; } | { ...; })), never>; ... 10 more ...; $watch(source: string | Function, cb: Function...' is not assignable to type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<{} & {} & {}> & { onCheckDetail?: ((...args: any[]) => any) | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> |...'.
Type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<({} & (Readonly<{} & {} & {}> & ({ [x: string & `on${string}`]: ((...args: any[]) => any) | undefined; } | { ...; }))) & (VNodeProps & ... 3 more ... & ({ ...; } | { ...; })), never>; ... 10 more ...; $watch(source: string | Function, cb: Function...' is not assignable to type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<{} & {} & {}> & { onCheckDetail?: ((...args: any[]) => any) | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> |...'.
Type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<({} & (Readonly<{} & {} & {}> & ({ [x: string & `on${string}`]: ((...args: any[]) => any) | undefined; } | { ...; }))) & (VNodeProps & ... 3 more ... & ({ ...; } | { ...; })), never>; ... 10 more ...; $watch(source: string | Function, cb: Function...' is not assignable to type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<{} & {} & {}> & { onCheckDetail?: ((...args: any[]) => any) | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> |...'.
Types of property '$options' are incompatible.
Type 'ComponentOptionsBase<Readonly<{} & {} & {}> & ({ [x: string & `on${string}`]: ((...args: any[]) => any) | undefined; } | { [x: string & `on${string}`]: undefined; }), { tabname: Ref<string>; user: Ref<...>; handleClick: (tab: any) => void; }, ... 7 more ..., {}> & MergedComponentOptionsOverride' is not assignable to type 'ComponentOptionsBase<Readonly<{} & {} & {}> & { onCheckDetail?: ((...args: any[]) => any) | undefined; }, { tableData: Ref<{ id: number; name: string; }[]>; handleClick: (scope: any) => void; }, ... 7 more ..., {}> & MergedComponentOptionsOverride'.
Type 'ComponentOptionsBase<Readonly<{} & {} & {}> & ({ [x: string & `on${string}`]: ((...args: any[]) => any) | undefined; } | { [x: string & `on${string}`]: undefined; }), { tabname: Ref<string>; user: Ref<...>; handleClick: (tab: any) => void; }, ... 7 more ..., {}> & MergedComponentOptionsOverride' is not assignable to type 'ComponentOptionsBase<Readonly<{} & {} & {}> & { onCheckDetail?: ((...args: any[]) => any) | undefined; }, { tableData: Ref<{ id: number; name: string; }[]>; handleClick: (scope: any) => void; }, {}, ... 6 more ..., {}>'.
Types of property 'setup' are incompatible.
Type '((this: void, props: Readonly<LooseRequired<(Readonly<{} & {} & {}> & ({ [x: string & `on${string}`]: ((...args: any[]) => any) | undefined; } | { [x: string & `on${string}`]: undefined; })) & {}>>, ctx: SetupContext<...>) => void | ... 2 more ... | Promise<...>) | undefined' is not assignable to type '((this: void, props: Readonly<LooseRequired<Readonly<{} & {} & {}> & { onCheckDetail?: ((...args: any[]) => any) | undefined; }>>, ctx: SetupContext<{ checkDetail: null; }>) => void | ... 2 more ... | Promise<...>) | undefined'.
Type '(this: void, props: Readonly<LooseRequired<(Readonly<{} & {} & {}> & ({ [x: string & `on${string}`]: ((...args: any[]) => any) | undefined; } | { [x: string & `on${string}`]: undefined; })) & {}>>, ctx: SetupContext<...>) => void | ... 2 more ... | Promise<...>' is not assignable to type '(this: void, props: Readonly<LooseRequired<Readonly<{} & {} & {}> & { onCheckDetail?: ((...args: any[]) => any) | undefined; }>>, ctx: SetupContext<{ checkDetail: null; }>) => void | ... 2 more ... | Promise<...>'.
Types of parameters 'ctx' and 'ctx' are incompatible.
Type 'SetupContext<{ checkDetail: null; }>' is not assignable to type 'SetupContext<EmitsOptions>'.
Types of property 'emit' are incompatible.
Type '(event: "checkDetail", ...args: any[]) => void' is not assignable to type '((event: string, ...args: any[]) => void) | ((event: string, ...args: any[]) => void)'.
Type '(event: "checkDetail", ...args: any[]) => void' is not assignable to type '(event: string, ...args: any[]) => void'.
Types of parameters 'event' and 'event' are incompatible.
Type 'string' is not assignable to type '"checkDetail"'.
47 | title: "New Tab",
48 | name: newTabName,
> 49 | content: Detail,
| ^^^^^^^
50 | });
51 | editableTabsValue.value = newTabName;
52 | };
我该如何写content,类型应该是组件或则字符串吧
