Element Plus中的树组件的具体用法(持续更新!)

TypeScript 复制代码
const defaultProps = {
  //子树为节点对象的children
  children: 'children',
  //节点标签为节点对象的name属性
  label: 'name',
}

属性

以下是树组件中的常用属性以及作用:

data:展示的数据(数据源)

show-checkbox:节点是否可被选择(点击可以选中)

node-key:每个树节点用来作为唯一标识的属性,整棵树应该是唯一的(如果树中包含children子数据,该属性不能省略)

default-expand-all:默认展开所有节点

default-checked-keys:默认勾选的节点的 key 的数组(是一个数组,数组中存放的就是上面node-key存放的唯一标识)

default-expanded-keys:默认展开的节点的 key 的数组(是一个数组,数组中存放的就是上面node-key存放的唯一标识)

current-node-key:当前选中的节点(可以是number或string类型)

props:接收一个对象,对象中可以包含以下两个属性(还可以包含其他属性,这里只列举了以下两个)

label:指定节点标签为节点对象的某个属性值(就是代表了要在页面中展示的节点名称) ,children:指定子树为节点对象的某个属性值(就是代表去哪个字段下读取数据当作子节点的数据)(注意:label和children这两个属性名是不变的,属性值需要根据项目需要进行修改)

方法

常用方法:

使用el-tree树组件提供的方法时,需要先在el-tree组件标签上利用ref打上标识(<el-tree ref="xxx"> </el-tree>),然后通过ref得到el-tree组件实例才能调用对应方法!

  1. getCheckedKeys:如果在el-tree标签上设置了show-checkbox属性且被选中,通过树组件实例.getCheckedKeys进行调用,它将返回当前选中节点key的数组(该数组由所有被选中的节点的id属性组成【为什么是id属性呢? 因为:在el-tree标签上设置了node-key="id"属性。所以该方法会收集所有选中的节点对象的id属性】)

  2. getHalfCheckedNodes:如果在el-tree标签上设置了show-checkbox属性且被选中,通过树组件实例.getHalfCheckedNodes进行调用,它将返回当前半选中的节点组成的数组

如遇这种情况该方法一般会和上面的getCheckedKeys配合使用

下方代码意思是:将利用getCheckedKeys得到的id数组和利用getHalfCheckedKeys得到的半选id数组合并然后作为向服务器发送请求的参数

TypeScript 复制代码
//抽屉确定按钮的回调
const handler = async () => {
  //职位(角色)的ID
  const roleId = RoleParams.id as number
  //选中节点的ID		getCheckedKeys方法会得到show-checkbox为true选中的全部节点对象的id组成的数组
  //为什么是能收集到id 		因为el-tree配置了node-key="id"属性
  let arr = tree.value.getCheckedKeys()
  //半选的ID
  let arr1 = tree.value.getHalfCheckedKeys()
  let permissionId = arr.concat(arr1)
  //下发权限
  let result: any = await reqSetPermisstion(roleId, permissionId)
  if (result.code == 200) {
    //抽屉关闭
    drawer.value = false
    //提示信息
    ElMessage({ type: 'success', message: '分配权限成功' })
    //页面刷新
    window.location.reload()
  }
}
相关推荐
Two_brushes.5 分钟前
【算法】宽度优先遍历BFS
算法·leetcode·哈希算法·宽度优先
森焱森2 小时前
水下航行器外形分类详解
c语言·单片机·算法·架构·无人机
小小小小宇3 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊3 小时前
Python之--基本知识
开发语言·前端·python
QuantumStack4 小时前
【C++ 真题】P1104 生日
开发语言·c++·算法
安全系统学习4 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖4 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖5 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
写个博客5 小时前
暑假算法日记第一天
算法
绿皮的猪猪侠5 小时前
算法笔记上机训练实战指南刷题
笔记·算法·pta·上机·浙大