ElementUI的el-tree树形组件实现分配权限注意的点

ElementUI的el-tree树形组件实现分配权限注意的点

---

 

文章目录

• 系列文章目录
• 前言
• 一、Template代码
• 二、script代码
• 三、页面效果
• 总结

 

---

前言

随着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">