Bootstrap Vue如何禁用Tab头点击并通过按钮切换标签页

我来帮你搞定这个问题！你碰到的两个核心问题：标签头点击没法禁用，以及点击下一步时tabIndex会自动重置，其实都是可以通过调整代码逻辑解决的，咱们一步步来：

问题根源 #

1. 标签禁用逻辑错误：你的tabIndex是从0开始计数的（第一个标签对应索引0），但你给第二个标签设置的:disabled="!(tabIndex==2)"逻辑完全反了——这意味着只有当当前索引是2时，第二个标签才可用，导致点击下一步想切换到索引1时，目标标签处于禁用状态，Bootstrap Vue会强制把tabIndex重置回原来的值。
2. 未阻止标签头的默认点击行为：默认情况下点击标签头会触发切换，咱们得把这个行为关掉。

完整解决方案 #

方案1：完全禁用标签头点击，自由切换标签 #

这种方式下，所有标签头都不能点击，只能通过上一步/下一步按钮切换，同时防止索引越界：

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<script src="https://unpkg.com/vue"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-card no-body >
    <!-- 用@click.native.prevent阻止标签头的点击切换行为 -->
    <b-tabs warning pills card vertical v-model="tabIndex" class="generictab" ref="wizard" @click.native.prevent>
      <!-- 给所有标签设置disabled="true"，彻底禁用标签头的点击交互 -->
      <b-tab title="Tab Contents 1" disabled>
        <b-row>
          <b-col sm="12">
            <b-form-group>
              <label for="name">Name</label>
              <b-form-input type="text" id="name" placeholder="Enter your name"></b-form-input>
            </b-form-group>
          </b-col>
        </b-row>
      </b-tab>
      <b-tab title="Tab Contents 2" disabled>
        Tab Contents 2
      </b-tab>
      <b-tab title="Tab Contents 3" disabled>
        Tab Contents 3
      </b-tab>
    </b-tabs>
    <div class="text-center">
      <b-button-group class="mt-2">
        <!-- 给按钮添加禁用判断，防止索引越界 -->
        <b-btn @click="tabIndex--" :disabled="tabIndex === 0">Previous</b-btn>
        <b-btn @click="tabIndex++" :disabled="tabIndex === 2">Next</b-btn>
      </b-button-group>
      <br>
      <span class="text-muted">Current Tab: {{tabIndex}}</span>
    </div>
  </b-card>
</div>

new Vue({
  el: '#app',
  data: {
    tabIndex: 0
  }
})

方案2：按顺序切换（必须依次走流程，不能跳步） #

如果你需要强制用户按顺序填写，不能跳转到后面的标签，那可以调整标签的动态禁用逻辑，确保只有当前标签的前一步完成后，才能切换到下一个：

<!-- 只修改b-tab的disabled属性部分，其他代码和方案1一致 -->
<b-tabs warning pills card vertical v-model="tabIndex" class="generictab" ref="wizard" @click.native.prevent>
  <b-tab title="Tab Contents 1" :disabled="tabIndex !== 0">
    <!-- 内容不变 -->
  </b-tab>
  <b-tab title="Tab Contents 2" :disabled="tabIndex < 1">
    Tab Contents 2
  </b-tab>
  <b-tab title="Tab Contents 3" :disabled="tabIndex < 2">
    Tab Contents 3
  </b-tab>
</b-tabs>

这样设置后，用户只能通过点击下一步依次推进，不能跳步，同时标签头的点击也被完全禁用。

内容的提问来源于stack exchange，提问作者Rasik