按钮权限布局(设置 element中 tree 树的排列)

页面中使用

 <el-button
              type="text"
              @click="edit(slotProps.date)"
              v-btn-key="['client:clue:update']"
              >编辑el-button
            >
            <el-button
              type="text"
              @click="del(slotProps.date)"
              v-btn-key="['client:clue:delete']"
              >删除el-button
            >
            <el-button
              type="text"
              @click="details(slotProps.date)"
              v-btn-key="['client:clue:detail']"
              >详情el-button
            >

import Vue from 'vue';
// 检测是否有权限
// 使用Vue.directive声明自定义指令btn-key
export const buttonPermissions = Vue.directive('btn-key', {
  inserted(el, binding, vnode) {
    const { value } = binding
    const all_permission = "*:*:*";
    const permissions = JSON.parse(localStorage.getItem("btnlist"))


    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value
      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })

      console.log(hasPermissions, 123)


      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
})

以上js文档需要在main.js中进行布局
import {} from ‘./assets/js/hasPermi’

设置相关权限

设置权限需要设置 tree 树，以下为 element 中 tree 树的布局

<template>
  <div class="box">
    <div class="card" style="padding: 10px; margin-bottom: 10px">
      <el-button type="primary" class="btn_color_1" size="small" @click="change"
        >绑定el-button
      >
    div>
    <el-card>
      <el-tree
        default-expand-all
        ref="tree"
        :check-strictly="true"
        @check="handleCheck"
        :data="routeList"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        :render-content="renderContent"
        @node-expand="handleExpand"
        :default-checked-keys="selected"
      >
      el-tree>
    el-card>
  div>
template>
<script>
import { RolePermissions, RolesUserdetach } from "@/api/limits/index";

export default {
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
      },
      routeList: [],
      selected: [],
    };
  },
  mounted() {
    this.getRolePermissions(this.$route.params.user_id);
  },
  computed: {},
  methods: {
    // 渲染权限组
    getRolePermissions(id) {
      RolePermissions({
        user_id: id,
      })
        .then((res) => {
          if (res.status == 1) {
            this.routeList = res.data.menu_list;
            this.selected = res.data.selected;
            this.$nextTick(() => {
              this.changeCss();
            });
          } else {
            this.$message.warning(res.msg || "请求数据失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    change() {
      RolesUserdetach({
        user_id: this.$route.params.user_id,
        ids: this.selected,
      })
        .then((res) => {
          if (res.status == 1) {
            this.$router.go(-1);
          } else {
            this.$message.warning(res.msg || "请求数据失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 内容区渲染后执行 判断底层 赋 class
    handleExpand() {
      // 节点被展开时触发的事件
      // 因为该函数执行在renderContent函数之前，所以得加this.$nextTick()
      this.$nextTick(() => {
        this.changeCss();
      });
    },
    renderContent(h, { node, data, store }) {
      // 树节点的内容区的渲染 Function
      let classname = "";
      // 由于项目中有三级菜单也有四级级菜单，就要在此做出判断
      if (node.level === 4) {
        classname = "foo";
      }
      if (node.level === 3 && node.childNodes.length === 0) {
        classname = "foo";
      }
      return h(
        "p",
        {
          class: classname,
        },
        node.label
      );
    },
    changeCss() {
      //将子节点横向排列方法
      var levelName = document.getElementsByClassName("foo"); // levelname是上面的最底层节点的名字
      for (var i = 0; i < levelName.length; i++) {
        // cssFloat 兼容 ie6-8  styleFloat 兼容ie9及标准浏览器
        levelName[i].parentNode.style.cssFloat = "left"; // 最底层的节点，包括多选框和名字都让他左浮动
        levelName[i].parentNode.style.styleFloat = "left";
        levelName[i].parentNode.onmouseover = function () {
          this.style.backgroundColor = "#fff";
        };
      }
    },

    //  =======================
    handleCheck(data, { checkedKeys }) {
      if (checkedKeys.includes(data.id)) {
        // 选中
        let node = this.$refs.tree.getNode(data.id); // getNode(node-key)
        this.selectChildren(data, true); // 选中子节点
        this.parentNodesChange(node); // 选中父节点
      } else {
        this.selectChildren(data, false); // 取消子节点
      }
      this.selected = this.$refs.tree.getCheckedKeys();
    },
    selectChildren(data, checked) {
      data &&
        data.children &&
        data.children.map((item) => {
          this.$refs.tree.setChecked(item.id, checked);
          if (data.children) {
            this.selectChildren(item, checked);
          }
        });
    },
    // 父级递归
    parentNodesChange(node) {
      // console.log(node);
      if (node.parent) {
        for (let key in node) {
          if (key == "id") {
            // console.log(node[key]);
            this.$refs.tree.setChecked(node, true);
          }
        }
        if (node.parent && node.id !== 0) {
          this.parentNodesChange(node.parent);
        }
      }
    },
  },
};
script>
<style scoped lang="less">
.box {
  padding: 15px;
}
// 树样式
/deep/ .el-tree-node.is-expanded > .el-tree-node__children {
  padding-left: 18px;
}
.el-tree {
  ::v-deep .el-tree-node {
    position: relative;
    padding-left: 16px; // 缩进量
  }
  ::v-deep .el-tree-node__children {
    padding-left: 16px; // 缩进量
  }
  // 竖线
  ::v-deep .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px dashed #ccc;
  }
  // 当前层最后⼀个节点的竖线⾼度固定
  ::v-deep .el-tree-node:last-child::before {
    height: 38px; // 可以⾃⼰调节到合适数值
  }
  // 去掉最顶层的虚线，放最下⾯样式才不会被上⾯的覆盖了
  & > ::v-deep .el-tree-node::after {
    border-top: none;
  }
  & > ::v-deep .el-tree-node::before {
    border-left: none;
  }
  // 展开关闭的icon
  ::v-deep .el-tree-node__expand-icon {
    font-size: 16px;
    // 叶⼦节点（⽆⼦节点）
    ::v-deep &.is-leaf {
      color: transparent;
      // display: none; // 也可以去掉
    }
  }
}
style>

效果展示：