02-两级tab

子组件

<template>
  <div>
    <div class="diyTab flex overflow-x-scroll">
      <div
        v-for="(item, inx) in tabArr"
        :key="item.key"
        :class="['tab-nav flex-none', activeKey == item.key ? 'active-tab active-color' : '']"
        @click="tabChange(item.key, inx)"
      >
        {{ item.title }}
      </div>
    </div>
    <div v-show="tabArr[tabInx].children.length" class="h-50px bg-white">
      <div class="flex mt-5px w-300px">
        <div
          v-for="item in tabArr[tabInx].children"
          :key="item.key"
          :class="['sub-tab-nav', activeKeySub == item.key ? 'active-color' : '']"
          @click="subTabChange(item.key)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, PropType, reactive } from 'vue';
// import { TabArr } from './../data/tabdata';
// 多级选项卡
interface ObjType {
  key: string;
  title: string;
}
export interface TabArr {
  key: string;
  title: string;
  children: ObjType[];
}
export const tabArr: TabArr[] = [
  {
    key: 'tab1',
    title: '全部',
    children: [],
  },
  {
    key: 'tab2',
    title: '02-00',
    children: [
      {
        key: 'tab2-1',
        title: '02-01',
      },
      {
        key: 'tab2-2',
        title: '02-02',
      },
    ],
  },
  {
    key: 'tab3',
    title: '03-00',
    children: [
      {
        key: 'tab3-1',
        title: '03-01',
      },
    ],
  },
];


export default defineComponent({
  props: {
    activeKey: { type: String },
    activeKeySub: { type: String },
    tabArr: {
      type: Array as PropType<TabArr[]>,
      default: () => [],
    },
  },
  emits: ['tab-change', 'sub-tab-change'],
  setup(props, { emit }) {
    console.log(props.activeKey);
    let tabInx = ref<number>(0);
    reactive({ tabInx });
    const subTabChange = (key: string) => {
      emit('sub-tab-change', key);
    };
    const tabChange = (key: string, inx) => {
      tabInx.value = inx;
      emit('tab-change', key);
      subTabChange(`${key}-1`);
    };

    return {
      tabInx,
      tabChange,
      subTabChange,
    };
  },
});
</script>
<style lang="less" scoped>
.active-color {
  color: #0960bd;
}
::-webkit-scrollbar {
  height: 2px;
  background: #fff;
}
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  height: 50px; /* 滚动条滑块长度 */
}
.diyTab {
  .tab-nav {
    width: 80px;
    line-height: 22px;
    padding: 12px 12px;
    text-align: center;
    cursor: pointer;
  }

  .active-tab {
    text-shadow: 0 0 0.25px currentColor;
    border-bottom: 2px solid #0960bd;
  }
}
.sub-tab-nav {
  padding: 12px;
  text-align: left;
  cursor: pointer;
}
</style>

父组件使用

<template>
  <TabDiy
    style="flex: none"
    :activeKey="activeKey"
    :activeKeySub="activeKeySub"
    :tabArr="tabArr"
    @tab-change="tabChange"
    @sub-tab-change="subTabChange"
  />
</template>
<script lang="ts">
import { defineComponent, ref, createVNode } from 'vue';
import TabDiy from './components/TabDiy.vue';
export default defineComponent({
  components: { TabDiy, TableContent, Abnormal, Button },
  setup() {
    let activeKey = ref('tab1'),
      activeKeySub = ref('');

    const tabChange = (key) => {
      activeKey.value = key;
      activeKeySub.value = key + '-1';
    };
    const subTabChange = (key) => {
      activeKeySub.value = key;
    };
  }
}
</script>