文章目录
一、问题
最近在用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
,以此类推。目前试了下是只有这种方法可行,无奈啊~~~如果有大佬有更好的方法,请评论支支招
示例代码如下所示:
vue
<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>
三、最后
本人每篇文章都是一字一句码出来,希望大佬们多提提意见。顺手来个三连击,点赞👍收藏💖关注✨。创作不易,给我打打气,加加油☕