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

最新推荐文章于 2024-09-30 00:39:15 发布

loyd3

最新推荐文章于 2024-09-30 00:39:15 发布

阅读量9.6k

点赞数 2

分类专栏： vue开发实践总结文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/loyd3/article/details/122281688

版权

vue开发实践总结专栏收录该内容

35 篇文章 1 订阅

订阅专栏

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

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

<div class="zls-page-title">
   <el-button
     type="primary"
     plain
     id="zls-button-active"
     @click="checkByDocAuthority('all')"
     >全部文档</el-button
   >
   <el-button
     type="primary"
     plain
     @click="checkByDocAuthority('open')"
     >公开文档</el-button
   >
   <el-button
     type="primary"
     plain
     @click="checkByDocAuthority('web')"
     >站端可看文档</el-button
   >
   <el-button
     type="primary"
     plain
     @click="checkByDocAuthority('province')"
     >网省可看文档</el-button
   >
</div>


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();
    },