Vue.js基于iView树形控件(tree)和多选框组(CheckboxGroup)实现的动态权限功能分配菜单树的render渲染效果

Vue.js 基于iView树形控件(tree)和多选框组(CheckboxGroup)实现的动态权限功能分配菜单树的render渲染效果

在实现角色-权限管理时遇到了交互上的问题，即：需要以树形样式列出系统中所有的菜单，并在每一个菜单后面列表这个菜单拥有的所有权限，用户可以勾选以设置是否开启这个菜单的对应权限功能，以下是实现了基于iview树形菜单的动态权限赋值功能的图：

其中使用到了Vue.js的render函数，具体实现的部分核心代码如下：

<template>
  <div>
    <Card>
      <div>
        已选中的权限:{{selectedPermissions}}
      </div>
      <Tree :data="data5" :render="renderContent" class="permission-tree-box"></Tree>
    </Card>
  </div>
</template>

<script>
export default {
  name: "rbac_role_permission_page",
  data() {
    return {
      selectedPermissions: ["p1_view", "p1_export"],
      data5: [
        {
          title: "parent 1",
          expand: true,
          permissions: [
            { value: "p1_view", text: "浏览" },
            { value: "p1_create", text: "创建" },
            { value: "p1_update", text: "更新" },
            { value: "p1_remove", text: "删除" },
            { value: "p1_export", text: "导出" }
          ],
          children: [
            {
              title: "child 1-1",
              expand: true,
              permissions: [
                { value: "p1_1_view", text: "浏览" },
                { value: "p1_1_create", text: "创建" },
                { value: "p1_1_update", text: "更新" },
                { value: "p1_1_remove", text: "删除" },
                { value: "p1_1_export", text: "导出" }
              ],
              children: [
                {
                  title: "leaf 1-1-1",
                  expand: true
                },
                {
                  title: "leaf 1-1-2",
                  expand: true
                }
              ]
            },
            {
              title: "child 1-2",
              expand: true,
              children: [
                {
                  title: "leaf 1-2-1",
                  expand: true
                },
                {
                  title: "leaf 1-2-1",
                  expand: true
                }
              ]
            }
          ]
        }
      ],
      buttonProps: {
        type: "default",
        size: "small"
      }
    };
  },
  methods: {
    renderContent(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%"
          },
          class: "permission-tree-node"
        },
        [
          h("span", [
            h("Icon", {
              props: {
                type: "ios-paper-outline"
              },
              style: {
                marginRight: "8px"
              }
            }),
            h("span", data.title)
          ]),
          h(
            "span",
            {
              style: {
                display: "inline-block",
                float: "right",
                marginRight: "32px"
              }
            },
            [
              h(
                "CheckboxGroup",
                {
                  props: {
                    value: this.selectedPermissions
                  },
                  on: {
                    "on-change": event => {
                      this.selectedPermissions = event;
                    }
                  }
                },
                (data.permissions || []).map(obj => {
                  return h(
                    "Checkbox",
                    {
                      props: {
                        label: obj.value
                      }
                    },
                    obj.text
                  );
                })
              )
            ]
          )
        ]
      );
    },
    append(data) {
      const children = data.children || [];
      children.push({
        title: "appended node",
        expand: true
      });
      this.$set(data, "children", children);
    },
    remove(root, node, data) {
      const parentKey = root.find(el => el === node).parent;
      const parent = root.find(el => el.nodeKey === parentKey).node;
      const index = parent.children.indexOf(data);
      parent.children.splice(index, 1);
    }
  },
  mounted() {}
};
</script>
<style>
.permission-tree-box ul.ivu-tree-children > li {
  margin: 0;
}
.permission-tree-node {
  padding: 10px 5px 10px 0;
  border-bottom: 1px solid #f6f6f6;
}
.permission-tree-node:hover {
  background-color: #f7f7f7;
}
</style>

 

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140