Vue2.6中Vuetify如何按条件禁用单个v-expansion-panel

问题说明 #

• Vuetify 的v-expansion-panels组件自带disabled属性，绑定在外层面板组上会禁用组内全部面板，无法满足单条/多条按条件禁用的需求
• 业务场景为v-for循环渲染10个左右折叠面板项，需要按规则禁用指定面板，禁用时需展示提示
• 此前尝试在v-expansion-header、v-expansion-content上绑定@click.stop阻止点击事件实现禁用，方案未生效
• 最初错误写法：

<v-expansion-panels>
  <v-expansion-panel
    @click.stop="number === 1"
  >
    <v-expansion-header />  
    <v-expansion-content />
  </v-expansion-panel>
</v-expansion-panels>

实现方案 #

disabled属性本身支持直接绑定在单个v-expansion-panel组件上，不需要手动拦截点击事件——组件内部已经封装了禁用状态下的事件拦截、样式处理逻辑，手动绑事件阻止的方式会因为组件内部事件触发优先级、冒泡逻辑限制失效。

完整实现代码 #

<template>
  <v-expansion-panels v-model="activePanel">
    <v-expansion-panel
      v-for="panelItem in panelList"
      :key="panelItem.id"
      :disabled="checkPanelDisabled(panelItem)"
    >
      <v-expansion-header>
        {{ panelItem.title }}
        <v-chip v-if="checkPanelDisabled(panelItem)" small color="warning" class="ml-2">
          当前面板暂不支持展开
        </v-chip>
      </v-expansion-header>
      <v-expansion-content>
        {{ panelItem.content }}
      </v-expansion-content>
    </v-expansion-panel>
  </v-expansion-panels>
</template>

<script>
export default {
  data() {
    return {
      activePanel: null,
      panelList: [
        { id: 1, number: 1, title: '面板1', content: '面板1内容' },
        { id: 2, number: 2, title: '面板2', content: '面板2内容' },
        // 其余循环项按业务数据补充
      ]
    }
  },
  methods: {
    // 自定义禁用判断函数，返回true时禁用对应面板
    checkPanelDisabled(item) {
      // 满足number === 1的规则时禁用
      if (item.number === 1) return true
      // 其余自定义判断逻辑在此处扩展，返回false即可正常展开
      return false
    }
  }
}
</script>

方案说明 #

• 直接在循环渲染的单个v-expansion-panel上绑定:disabled，传入判断条件或自定义校验函数即可实现按条件单面板禁用，不会影响其他面板
• 禁用提示直接写在v-expansion-header内部，通过禁用判断函数的返回值控制显隐即可，如果需要悬浮提示可以替换为v-tooltip组件包裹触发
• 不需要额外绑定点击事件阻止逻辑，组件原生disabled状态已经处理了所有展开触发入口的拦截，同时自带禁用态样式、无障碍属性支持，兼容性更好

内容的提问来源于stack exchange，提问作者Carlos Sá