el-button 可以同时选中多个吗

问题遇到的现象和发生背景

img

img

问题相关代码，请勿粘贴截图
<div class="nav-header">
    <p>类型： &nbsp;&nbsp;&nbsp;</p>
    <el-button
      type="success"
      plain
      autofocus="true"
    >经验交流</el-button>
    <el-button
      type="success"
      plain
    >问答</el-button>
    <el-button
      type="success"
      plain
    >供应信息</el-button>
    <el-button
      type="success"
      plain
    >需求信息</el-button>
    <el-button
      type="success"
      plain
    >用人信息</el-button>
    <el-button
      type="success"
      plain
    >找活信息</el-button>
    <el-button
      type="success"
      plain
    >话题</el-button>
    <el-button
      type="success"
      plain
    >帖子</el-button>
  </div>
  <div class="nav-major">
    <p>状态： &nbsp;&nbsp;&nbsp;</p>
    <el-button
      type="primary"
      plain
    >审核中</el-button>
    <el-button
      type="primary"
      plain
    >审核通过</el-button>
    <el-button
      type="primary"
      plain
    >未通过</el-button>
  </div>
运行结果及报错内容

从element直接拿过来的

我的解答思路和尝试过的方法
我想要达到的结果

上下可以同时选中一个 现在是一共只能选中一个按钮

img

用两个数组循环，再根据点击状态显示

推荐你这样，因为本身你的未选中状态是 白背景type:default; ，你给其对应设置一个 一行为一组 点哪一个 那一个设置 type:success ,其他的都设置默认类型default 也可以实现你所说的效果

这个用按钮来写有点复杂了呢；直接拿element的复选框来写，把样式改一改就可以的呢；所选择的值是双向绑定的，比这个方案要好一点的呢；

img

如图是我修改过之后的，那个复选框也可以去掉的，选中样式也可以修改的；

.el-checkbox{
      padding: 3px;
      height: 24px;
      line-height: 24px;
      border-radius: 2px;
      border: 1px solid #D9D9D9;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .el-checkbox.is-checked{
      border: 1px solid #409EFF;
    }
    .el-checkbox__input{
      display: none!important;
    }
    .el-checkbox__label{
      padding-left: 0!important;
    }

img