el-tabs隐藏标签页
时间: 2023-09-29 17:05:49 浏览: 94
要隐藏el-tabs中的标签页,可以使用v-if或v-show指令来控制标签页的显示与隐藏。假设要隐藏名为"second"的标签页,可以在el-tab-pane元素上添加v-if或v-show属性,并将其绑定到一个变量上。当这个变量为false时,标签页将被隐藏。
例如,在el-tabs中添加一个状态变量hideSecondTab,然后在el-tab-pane中添加v-if或v-show属性,将其绑定到hideSecondTab变量上。当hideSecondTab为true时,"second"标签页将被隐藏。
下面是一个示例代码片段:
<template>
<el-tabs v-model="activeName" ref="tabs">
<el-tab-pane label="基本信息1" name="first">基本信息</el-tab-pane>
<el-tab-pane label="基本信息2" name="second" v-if="hideSecondTab">基本信息</el-tab-pane>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: 'first',
hideSecondTab: true
};
}
};
</script>
在上面的示例中,hideSecondTab变量初始值为true,所以"second"标签页会被隐藏。如果要显示"second"标签页,只需要将hideSecondTab变量设置为false即可。