ElementTree 树形控件

前言

遇见一个需求,我需要在tree控件里随意选中内容,并且最后发送给后端一个字符串,字符串格式要求,父级后面跟:,子级后面跟,,其实我刚开始想了很多方法,甚至比如递归循环之类的,但后面发现其实把问题复杂化了

思路

首先你在选中或者取消选中的时候并不需要每次转换格式,因为这样做效率是很低的,我是在想每次选中通过组件自带的方法this.$refs.tree.getCheckedNodes(false, true)获取到每次选中的节点,在最后的确定提交按钮上进行格式转换,核心转换如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const getSelect = this.$refs.tree.getCheckedNodes(false, true)
// 这里第二个参数要带true因为这里默认false,半选中状态的父级
let str = ''
getSelect.forEach(item => {
if (item.children) {
// 判断是否有子节点,如果有那选中的这个就是父节点,后面追加:
str += item.menuCodeVal + ':'
} else {
// 如果没有就是子节点,后面追加,
str += item.menuCodeVal + ','
}
})
console.log(str.substring(0, str.length - 1))
// 最后还要处理下最后的一个,
// 输出: 一级1:二级1-1,二级1-2,一级2:二级2-1,一级3:二级3-1

需求升级

理解错了后端要的格式,所以需求进行下升级,上面输出的是:一级1:二级1-1,二级1-2,一级2:二级2-1,一级3:二级3-1但其实后端需要的是一级1:二级1-1,一级1:二级1-2,一级2:二级2-1,一级3:二级3-1这种格式,所以代码做了改动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const parent = this.$refs.tree.getCheckedNodes(false, true)
let str = ''
// 拼接字符串
let beforeParent = ''
// 记录之前的父节点
parent.forEach(item => {
// 遍历元素
if (item.menuCodeVal.indexOf('p') !== -1) {
// 让后端在父节点加了个标识符,如p,这里判断如果有p就是父节点
// children也能判断但是在项目中最后只有一个父节点的就没有children
beforeParent = ''
beforeParent = item.menuCodeVal + ':'
// 这里每次到父节点都清空下之前的,并且在父节点后面追加:
}
if (!item.children) {
// 如果没有子节点就进这里
if (item.menuCodeVal.indexOf('p') !== -1) {
// 先判断这个子节点是不是特殊的父节点(比如首页,解决方案接口权限)
// 如果是父节点就不要再加:直接,
str = str + item.menuCodeVal + ','
} else {
// 不是的话那就是子节点,要父节点:子节点格式拼接
str = str + beforeParent + item.menuCodeVal + ','
}
}
})
console.log(str.substring(0, str.length - 1))
// 最后处理下末尾符号