ElementUI的el-tree树形组件实现分配权限注意的点
前言
随着Vue的爆火(很大部分是我们国内开发者功劳),自开源以来,在GitHub上已经斩获176k票star,位居前三,所以饿了么推出的基于Vue的前端框架ElementUI以简洁的UI与实用的组件等
下面是一个完整的el-tree实例
一、Template代码
<el-tree style="height:100%;" :data="data" @check="handleCheckChange" show-checkbox default-expand-all node-key="dictId"
ref="authTree" highlight-current :props="defaultProps">
</el-tree>
- label:定义你要绑定的标签属性
- children:定义子树的属性值
- data:树结构绑定的数据源,后台借口传过来的数据
- check函数:当复选框被点击的时候触发
- show-checkbox:显示选项的多选框
- node-key="menuid":什么意思呢,官网很模糊只是说一些功能都必须要提供这个属性(比如选中等等),它其实就是我们数据源中的唯一标识,比如数据库中你的权限表主键为id,这里就是填id
- ref=""authTree":创建引用到此组件的类似指针的功能
- :props:"defaultProps":这个属性就是定义你要绑定的子节点和展示标题相关,官网有四个属性可选值,比较常用的就这两个,其他的可以移步官网:
二、script代码
1、data定义
data: [],//我们后台接口访问到的展示数据
defaultProps: {//这里就是props属性绑定的值
children: 'children', //填写你的数据格式里面的子集,我这里是children
label: 'dictText' //填写你要展示的标题名称,我这是dictText
},
//权限Tree选中的节点
moduleids: [],
2、查询方法
3、献上我这个页面所有代码
<template>
<el-container class="auth-container">
<el-header style="width:100%;margin:15px 0px;padding:0px 15px;">
<el-row class="el-row-bg">
<el-col :span="24">
<el-button type="success" icon="el-icon-plus" @click="dialogFormVisible=true">新增角色</el-button>
<el-button type="primary" icon="el-icon-edit-outline" @click="saveAuth">保存角色权限</el-button>
</el-col>
</el-row>
</el-header>
<el-container class="auth-container">
<el-aside class="auth-aside">