我想在vue3.x和typescirpt中使用动态地添加删除el-tabs的tab-pannel,但是报错
发布于 2 年前 作者 feer 2432 次浏览 来自 问答
粉丝福利 : 关注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,类型应该是组件或则字符串吧

回到顶部