vue按钮权限控制

1，后端返回btnList存入本地
1.1 btnList结构为

[{"menuCode":"40050304","menuName":"手术审批管理","buttons":[{"buttonCode":"4005030401","buttonName":"手术申请信息查询"},{"buttonCode":"4005030402","buttonName":"手术申请信息导出"},{"buttonCode":"4005030403","buttonName":"查询条件重置"},{"buttonCode":"4005030404","buttonName":"手术申请提交"},{"buttonCode":"4005030405","buttonName":"审批（不同角色进行具体手术审批）"},{"buttonCode":"4005030406","buttonName":"撤销审批"},{"buttonCode":"4005030407","buttonName":"手术申请信息查看详情"},{"buttonCode":"4005030408","buttonName":"审批节点查询"}]}]

1.2 登录时获取并存入本地

var btnList=JSON.stringify(res.data.btnList)
               localStorage.setItem(
                "btnList",
                btnList
              );     

2,在当前页面判断是否有值，筛选出当前页面的权限
2.1 data获取

 btnList:localStorage.getItem("btnList")//获取

2.2 created里判断是否有值

if (JSON.parse(this.btnList).length > 0) {
      this.btnList = JSON.parse(this.btnList).filter(
        (item) => item.menuCode == "40050301"
      ); //手术审批管理
      if(this.btnList.length==0){
         this.btnList = [{ buttons: [] }];
      }
    } else {
      this.btnList = [{ buttons: [] }];
    }

如图所示

1658913474574.png

3，页面绑定
3.1单个按钮绑定

<el-button
              size="mini"
              v-show="
                btnList[0].buttons.findIndex(
                  (item) => item.buttonCode == '4005030401'
                ) != -1
              "
              type="primary"
              style="margin: 0px 10px 10px 0"
              @click="applicationbutton"
              >手术申请</el-button>

3.2多个按钮绑定

  <el-table-column label="操作" width="500">
                <template slot-scope="scope">
                  <span v-for="(item,index) in btnList[0].buttons" :key="index"> 
                  <el-button
                   v-if=" item.buttonCode == '4005030405'"
                    @click="Operation(scope.row)"
                    type="primary"
                    size="small"
                    >审批</el-button
                  >
                  <el-button
                  v-if=" item.buttonCode == '4005030406'"
                    @click="ApprovalDetails(scope.row)"
                    type="primary"
                    size="small"
                    >撤销审批</el-button
                  >
                  <el-button
                   v-if=" item.buttonCode == '4005030407'"
                    type="primary"
                    size="small"
                    @click="Operationdl(scope.row)"
                    >查看详情</el-button
                  >
                  <el-button
                  v-if=" item.buttonCode == '4005030408'"
                    @click="examine(scope.row)"
                    type="primary"
                    size="small"
                    >审批节点</el-button
                  >
                  <el-button
                  v-if=" item.buttonCode == '4005030409'"
                    @click="ApprovalDetails(scope.row)"
                    type="primary"
                    size="small"
                    >再次申请</el-button
                  >
                   </span>
                </template>
              </el-table-column>