1.获取所有的子节点
function getAllLeaf (data) {
let result = []
function getLeaf (data) {
data.forEach(item => {
if (!item.children) {
result.push(item.path)
} else {
getLeaf(item.children)
}
})
}
getLeaf(data)
return result
}
2.获取所有被选中的子节点,最后一层的节点checked为true时,做默认选中的效果
getDefaultLeaf(data) {
let result = []
function getLeaf(data) {
data.forEach(item => {
if (!item.children) {
if (item.checked) {
result.push(item.id)
}
} else {
getLeaf(item.children)
}
})
}
getLeaf(data)
return result
}
3. 获取所有选中的节点,包括半选中和选中
<el-tree
ref="tree"
:data="menuData"
show-checkbox
node-key="id"
:props="defaultProps"
:default-expand-all="true"
:default-checked-keys="checkedKeys"
style="height:500px;overflow:auto;"
@check="handleNodeClick"
></el-tree>
handleNodeClick() {
let res = this.$refs.tree
.getCheckedKeys()
.concat(this.$refs.tree.getHalfCheckedKeys())
this.selectedIds = res
// console.log(res, '被选中的节点')
}
4.table表单里面根据按钮进行全部折叠隐藏的功能
hanldeExpand(value) {
console.log(value)
this.handleExpand(value)
},
handleExpand(isAss) {
// 此判断是否为展开展开或折叠状态--若展开折叠是同一个按钮则无需传参和加此if
if (this.isExpand == isAss) {
return
}
this.isExpand = !this.isExpand
this.$nextTick(() => {
this.forArr(this.tableData, this.isExpand)
})
},
// 遍历
forArr(arr, isExpand) {
arr.forEach(i => {
this.$refs.myTable.toggleRowExpansion(i, isExpand)
if (i.children) {
this.forArr(i.children, isExpand)
}
})
}
5.编辑和修改公用一个dialog的时候,使用this.$refs[formName].resetFields(),需像下面样使用,否则无效
resetForm(formName) {
this.$refs[formName].resetFields()
},
if (type === 'add') {
this.title = '添加菜单'
this.isEdit = false
this.submitType = 0
} else if (type === 'edit') {
// console.log(data, '菜单')
this.isEdit = true
this.submitType = 1
this.title = '修改菜单'
this.$nextTick(() => {
this.form = Object.assign(
{},
{
name: data.name,
code: data.code,
id: data.id
}
)
})
}
6.普通数组转化为tree结构做权限菜单
export function arrayToTree(data) {
let result = []
let map = {}
if (!Array.isArray(data)) {
//验证data是不是数组类型
return []
}
data.forEach(item => {
//建立每个数组元素id和该对象的关系
map[item.id] = item //这里可以理解为浅拷贝,共享引用
})
data.forEach(item => {
let parent = map[item.pId] || map[item.parentId] //找到data中每一项item的爸爸
if (parent) {
//说明元素有爸爸,把元素放在爸爸的children下面
;(parent.children || (parent.children = [])).push(item)
} else {
//说明元素没有爸爸,是根节点,把节点push到最终结果中
result.push(item) //item是对象的引用
}
})
return result //数组里的对象和data是共享的
}
以上是个人使用elementUI中的笔记总结,方便自己查看