element按钮组点击切换样式

最新推荐文章于 2024-04-30 17:28:38 发布

原创最新推荐文章于 2024-04-30 17:28:38 发布 · 2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端

前端开发专栏收录该内容

6 篇文章

订阅专栏

这个示例展示了如何使用Element UI的按钮组组件实现图表信息和数据信息的切换。currSelect1和currSelect2分别表示两个按钮的默认选中状态，changeTag方法用于切换选中状态。点击按钮会更新当前选中的标签，实现功能交互。

<el-button-group >
                  <el-button type="primary" :plain='currSelect1' size="mini" @click="changeTag(1)">图表信息</el-button>
                  <el-button type="primary" :plain='currSelect2' size="mini" @click="changeTag(2)">数据信息</el-button>
                </el-button-group>

currSelect1:false,

currSelect2:true,

    changeTag(num){
      if(num == 1){
        this.currSelect1=false;
        this.currSelect2=true;
      }else{
        this.currSelect2=false;
        this.currSelect1=true;
      }
    },