如何在ElementUI中创建一个按钮组，使得点击后按钮保持高亮状态，只有当点击组内的其他按钮时才会改变高亮

在Element UI中，你可以通过`el-button-group`组件来创建一个按钮组，并结合Vue.js的数据绑定和事件监听来实现在按钮之间切换高亮状态。以下是一个简单的示例：

首先，在HTML模板中创建一个`el-button-group`：

<template>
  <div>
    <el-button-group v-model="currentButton">
      <el-button :key="button.id" @click="handleClick(button)" :active="$index === currentButton">{{ button.text }}</el-button>
      <!-- 根据你的需要添加更多的按钮 -->
    </el-button-group>
  </div>
</template>

然后，在你的Vue实例中设置数据和处理事件：

<script>
export default {
  data() {
    return {
      currentButton: 0, // 初始高亮的按钮索引
      buttons: [
        { id: 0, text: '按钮1' },
        { id: 1, text: '按钮2' },
        { id: 2, text: '按钮3' } // 添加更多按钮
      ]
    };
  },
  methods: {
    handleClick(button) {
      this.currentButton = button.id; // 点击按钮时更新当前高亮按钮
    }
  }
};
</script>

在这个例子中，当你点击组内的按钮时，对应的`v-model`值会改变，这会使得`currentButton`指向的新按钮处于高亮状态。直到你再次点击另一个按钮，高亮状态才会切换。