如何实现多组el-button-group按钮独立维护active状态？

原始代码 #

<div class="dateNav">
   <el-button-group>
      <el-button type="danger" plain> Days </el-button>      
      <el-button type="danger" plain> Lates </el-button>      
      <el-button type="danger" plain> Nights </el-button>   
   </el-button-group>   
</div>
<div class="dtFilter">
   <el-button-group>
      <el-button type="danger" plain> Unconfirmed </el-button>      
      <el-button type="danger" plain> Confirmed </el-button>      
      <el-button type="danger" plain> All </el-button>    
   </el-button-group>
</div>

答案：完全可以实现 #

这两组按钮是独立的DOM模块，只要给它们分别绑定独立的状态变量，就能实现各自组内单一按钮激活、两组状态互不影响的效果。

具体实现示例 #

以Vue项目为例，修改后的代码如下：

组件脚本部分

// Vue 2 写法
export default {
  data() {
    return {
      // 第一组按钮的激活状态标识
      activeTime: 'Days',
      // 第二组按钮的激活状态标识
      activeFilter: 'Unconfirmed'
    }
  }
}

// Vue 3 组合式写法
import { ref } from 'vue'
export default {
  setup() {
    const activeTime = ref('Days')
    const activeFilter = ref('Unconfirmed')
    return { activeTime, activeFilter }
  }
}

模板部分

<div class="dateNav">
   <el-button-group>
      <el-button 
        type="danger" 
        plain 
        :active="activeTime === 'Days'" 
        @click="activeTime = 'Days'"
      > Days </el-button>      
      <el-button 
        type="danger" 
        plain 
        :active="activeTime === 'Lates'" 
        @click="activeTime = 'Lates'"
      > Lates </el-button>      
      <el-button 
        type="danger" 
        plain 
        :active="activeTime === 'Nights'" 
        @click="activeTime = 'Nights'"
      > Nights </el-button>   
   </el-button-group>   
</div>
<div class="dtFilter">
   <el-button-group>
      <el-button 
        type="danger" 
        plain 
        :active="activeFilter === 'Unconfirmed'" 
        @click="activeFilter = 'Unconfirmed'"
      > Unconfirmed </el-button>      
      <el-button 
        type="danger" 
        plain 
        :active="activeFilter === 'Confirmed'" 
        @click="activeFilter = 'Confirmed'"
      > Confirmed </el-button>      
      <el-button 
        type="danger" 
        plain 
        :active="activeFilter === 'All'" 
        @click="activeFilter = 'All'"
      > All </el-button>    
   </el-button-group>
</div>

实现逻辑说明 #

• 第一组按钮共用activeTime变量，点击时更新该变量，只有与变量值匹配的按钮会触发active状态
• 第二组按钮用独立的activeFilter变量，操作完全不干扰第一组的状态
• 这样就能达成你要的效果：比如“Days”和“Unconfirmed”可同时激活；切换第一组的“Lates”时，“Days”失活但“Unconfirmed”保持激活状态

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