【vue】使用el-button实现点击按钮 按钮是选中状态列表内容进行切换

vue 不使用el-tab而是使用el-button实现点击按钮 按钮是选中状态列表内容进行切换
例子如下：

注意第一个el-button有id 意即这个button是默认选中的

   全部文档
   公开文档
   站端可看文档
   网省可看文档



checkByDocAuthority(type) {
      //去除点击样式
      //如果有默认选中的按钮
      let buttons = document.getElementById("zls-button-active");
      //去除id
      if (buttons) {
        buttons.id = "";
      }
      switch (type) {
        case "all": //全部
          this.searchForm.docAuthorityInteger = "";
          break;
        case "open": //公开
          this.searchForm.docAuthorityInteger = String(this.statusMap.OPEN);
          break;
        case "web": //站端可看
          this.searchForm.docAuthorityInteger = String(this.statusMap.WEB);
          break;
        case "province": //网省可看
          this.searchForm.docAuthorityInteger = String(this.statusMap.PROVINCE);
          break;
      }
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = 10;
      //获取当前触发该方法的dom元素
      let target = event.currentTarget;
      //添加按钮点击样式
      target.id = "zls-button-active";
      this.getList();
    },