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

先上效果图：

1.checkbox 勾选框对齐的方式， 可以采用修改组件的css样式来改，我这边设置的是左对齐的方式。

>>>.ivu-checkbox-group{
  position: fixed;
  left: 400px;
}

 2.判断权限，上级给下级分配权限，才可以勾选操作。很明显这个用也是 diasbled：true  的属性控制的。

在数组里面塞进一个变量来控制：disabled： true，禁止使用， false 可使用

                  permissions: [
                    { value: "p1_2_2_view", text: "浏览", disabled: true}
                  ],

全部代码如下:

<template>
  <div>
    <Card>
      <div>
        已选中的权限:{{selectedPermissions}}
      </div>
      <Tree :data="data5" :render="renderContent" class="permission-tree-box"></Tree>
    </Card>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      selectedPermissions: ["p1_view", "p1_1_view"],
      data5: [
        {
          title: "后台管理",
          expand: true,
          disableCheckbox: true,
          permissions: [
            { value: "p1_view", text: "浏览", disabled: false },
          ],
          children: [
            {
              title: "管理员",
              expand: true,
              permissions: [
                { value: "p1_1_view", text: "浏览", disabled: false},
              ],
              children: [
                {
                  title: "用户列表",
                  expand: true,
                  permissions: [
                    { value: "p1_1_1_view", text: "浏览", disabled: true},
                    { value: "p1_1_1_create", text: "创建", disabled: true },
                    { value: "p1_1_1_update", text: "更新", disabled: true },
                    { value: "p1_1_1_remove", text: "删除", disabled: true },
                    { value: "p1_1__export", text: "导出", disabled: true }
                  ],
                },
                {
                  title: "角色列表",
                  expand: true,
                  permissions: [
                    { value: "p1_1_2_view", text: "浏览", disabled: true}
                  ],
                }
              ]
            },
            {
              title: "操作员",
              expand: true,
              permissions: [
                { value: "p1_2_view", text: "浏览", disabled: true}
              ],
              children: [
                {
                  title: "操作员一",
                  expand: true,
                  permissions: [
                    { value: "p1_2_1_view", text: "浏览", disabled: true}
                  ],
                },
                {
                  title: "操作员二",
                  expand: true,
                  permissions: [
                    { value: "p1_2_2_view", text: "浏览", disabled: 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,
                        disabled: obj.disabled
                      } 
                    },
                    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 scoped>
.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;
}
>>>.ivu-checkbox-group{
  position: fixed;
  left: 400px;
}
</style>

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

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