bootstrapvue 的tab组件,如何动态绑定禁止和开启
时间: 2023-02-08 10:48:48 浏览: 106
以BootStrap Tab为例写一个前端组件
BootstrapVue 的 tab 组件可以通过绑定 `:disabled` prop 来动态禁止某个标签页。
可以在某个标签页元素上绑定一个变量来控制其是否被禁用。例如:
```
<b-tabs>
<b-tab :disabled="tab1Disabled" title="Tab 1"></b-tab>
<b-tab :disabled="tab2Disabled" title="Tab 2"></b-tab>
<b-tab :disabled="tab3Disabled" title="Tab 3"></b-tab>
</b-tabs>
```
然后在组件的 data 中定义变量来控制禁用状态。
```
data() {
return {
tab1Disabled: false,
tab2Disabled: true,
tab3Disabled: false
}
},
```
如果想要动态的开启标签页,可以在通过js程序修改相应的变量值
```
methods: {
openTab1(){
this.tab1Disabled = false;
}
}
```
在组件中调用这个方法,就能开启第一个标签页。
阅读全文