Vue 页签 按钮

最终效果：

源码：

<template>
    <div>
        <div class="flex">
            <div v-for="(item, index) in btns1" :key="index" @click="changeActive(item, index)">
                <div class="btn1" :class="item.active? 'active1':''">{{item.name}}</div>
            </div>
        </div>
        
        <div class="flex">
            <div v-for="(item, index) in btns2[index]" :key="index" @click="change2Active(item, index)">
                <div class="btn2" :class="item.active? 'active2':''">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import LinkAge from '../../components/Slinkage';
export default {
    data () {
        return {
            index: 0,
            btns1: [{name:'待我处理',active:false},
                    {name:'我的指派',active:false},
                    {name:'历史记录',active:false}],
            btns2: [
                [{name:'查看全部1',active:false},{name:'任务1',active:false},{name:'审批1',active:false}],
                [{name:'查看全部2',active:false},{name:'任务2',active:false},{name:'审批2',active:false}],
                [{name:'查看全部3',active:false},{name:'任务3',active:false},{name:'审批3',active:false}]
            ]
        }
    },
    computed:{
        
    },
    components: {
        LinkAge
    },
    onLoad: function (option) {
        
    },
    mounted() {

    },
    methods: {
        changeActive(item, index) {
            this.btns1.forEach(item=> {
                item.active = false;
            })
            item.active = true;
            this.index = index;
            this.btns2[this.index].forEach(item=> {
                item.active = false;
            })
            console.log(this.index)
            this.btns2[this.index][0].active = true;
            
        },
        change2Active(item, index) {
            this.btns2[this.index].forEach(item=> {
                item.active = false;
            })
            item.active = true;
            this.btns2[this.index][index].active = true;
        }
    }
}
</script>

<style>
.flex {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.btn1 {
    width: 200upx;
    height: 50upx;
    line-height: 50upx;
    text-align: center;
}
.btn2 {
    width: 200upx;
    height: 50upx;
    line-height: 50upx;
    text-align: center;
    border: solid 1px #b7ddc8;
    background-color: #e8f9ef;
}
.active1 {
    background: #13ce66;
    color: #FFF;
    border-color: #13ce66;
}
.active2 {
    background-color: #0196fa;
    color: #fff;
}
</style>
<style>
    page {
        background: #f6f7fb;
    }
</style>