avue-tabs设置默认选中的tab

文章目录

• 一、问题
• 二、解决
• 三、最后

一、问题

最近在用avue这个UI框架来开发页面，有用到avue-tabs这个tab切换组件。结果竟然发现element-ui中el-tabs的v-model在avue-tabs中竟然是没有用的，无法设置默认选中哪个tab。avue这个基于element-ui开发的UI框架竟然没有继承它的属性，正常设置默认选中的官方文档如下所示：

二、解决

给avue-tabs设置ref，然后通过$refs调用方法changeTabs来切换选中哪个tab项。 changeTabs里传索引值即可，第一个就传0，第二个就传1，以此类推。目前试了下是只有这种方法可行，无奈啊~~~如果有大佬有更好的方法，请评论支支招

示例代码如下所示：

<template>
	<avue-tabs
		ref="tabs"
		:option="option"
	/>
</template>
<script>
export default {
	data() {
		return {
			option: [{
				label: '我审批的',
				prop: '1'
			}, {
				label: '我申请的',
				prop: '2'
			}, {
				label: '抄送我的',
				prop: '3'
			}]
		}
	},
	mounted() {
        this.$nextTick(() => {
            this.$refs.tabs.changeTabs(0)
        })
	}
}
</script>

三、最后

本人每篇文章都是一字一句码出来，希望大佬们多提提意见。顺手来个三连击，点赞👍收藏💖关注✨。创作不易，给我打打气，加加油☕