hac/src/views/home/task/task.vue

<template>
    <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick">
        <template #tab-to-do>
            <TaskTable :tableKey="tabsKey" v-if="tabsKey === 'to-do'"/>
        </template>
        <template #tab-done>
            <TaskTable :tableKey="tabsKey" v-if="tabsKey === 'done'"/>
        </template>
        <template #tab-initiated>
            <TaskTable :tableKey="tabsKey" v-if="tabsKey === 'initiated'"/>
        </template>
        <template #tab-copied>
            <TaskTable :tableKey="tabsKey" v-if="tabsKey === 'copied'"/>
        </template>
    </HcTabsSimple>
</template>

<script setup>
import {ref, watch} from "vue";
import TaskTable from "../components/TaskTable.vue";

//选项卡
const tabsKey = ref('to-do')
const tabsData = ref([
    {icon: 'time', label: '待办任务', key: 'to-do'},
    {icon: 'calendar-check', label: '已办任务', key: 'done'},
    {icon: 'user-shared', label: '我发起的任务', key: 'initiated'},
    {icon: 'user-received', label: '抄送给我的', key: 'copied'},
])

const tabsClick = (key) => {
    tabsKey.value = key
}

</script>

<style lang="scss" scoped>

</style>

<style lang="scss">

</style>