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>