Element Plus中的树组件的具体用法（持续更新！）

const defaultProps = {//子树为节点对象的childrenchildren: '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数组合并然后作为向服务器发送请求的参数

//抽屉确定按钮的回调
const handler = async () => {//职位(角色)的IDconst roleId = RoleParams.id as number//选中节点的ID		getCheckedKeys方法会得到show-checkbox为true选中的全部节点对象的id组成的数组//为什么是能收集到id 		因为el-tree配置了node-key="id"属性let arr = tree.value.getCheckedKeys()//半选的IDlet 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()}
}