element-plus使用el-tree组件获取所有选中节点id以及实现实时过滤
目录
element-plus使用el-tree组件获取所有选中节点id以及实现实时过滤
1.过滤搜索关键字
<el-input size="default" placeholder="请输入角色权限" v-model="filterText"></el-input>
<el-tree
class="tree-border"
:data="state.menuOptions"
show-checkbox
ref="treeRef"
node-key="menuId"
:props="state.defaultProps"
:default-checked-keys="state.defaultCheckedTree"
:filter-node-method="filterNode"
></el-tree>标签中需要加上ref以及:filter-node-method两个重要属性
import {ElTree} from 'element-plus'
const treeRef = ref<InstanceType<typeof ElTree>>()
interface Tree {
[key: string]: any
}
//过滤搜索角色
const filterText = ref("")//搜索框
const filterNode = (value: string, data: Tree) => {
if (!value) return true
//我这里 tree 数据中的唯一 id 为 menuName，根据自己的数据修改即可
return data.menuName.includes(value)
}
//侦听搜索
watch(filterText, (val) => {
treeRef.value!.filter(val)
})2.获取所有选中节点 id，上方已经绑定了 ref，直接用 ref 去获取即可
const ids = treeRef.value?.getCheckedKeys()
console.log(ids)//所有 id 组成的数组
3.另外还有一个将扁平数据转化为树形数据的工具函数，使用这个组件的时候或许可以用上，这个是搬运别人的，不记得出处了，我参照自己数据结构稍微改了参数，menuId 为每个节点的唯一 id 标识，parentId 为父节点的 id 标识
/**
- 将一维的扁平数组转换为多层级对象
- @param {[type]} list 一维数组，数组中每一个元素需包含 id 和 parent_id 两个属性
- @return {[type]} result 多层级树状结构
*/
export function arrayToTree(list) {
let result = []; // 结果集
let map = {};
for(let item of list) { // 遍历一遍源数组
map[item.menuId] = {...item}; // 将源数组中每一个对象的id作为key，将当前对象所有属性和新增属性chilrden作为value。
}
for (let item of list) {
if (item.parentId === 0) { // 当pid为0时，添加到结果集
let newItem = map[item.menuId]; // 注意！这里一定要将map[item.id] 赋值给新变量，这样newItem就和map[item.id]指向同一个内存地址了，达到数据共享
result.push(newItem);
} else {
map[item.parentId].children.push(map[item.menuId]); // 将key为当前id的对象，添加到key等于pid的对象的chilrden中
}
}
return result;
}