ElementUI之tree形下拉选

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<el-row>
<el-col :span="11">
<el-form-item label="类型" prop="categoryId">
<SelectTree
:props="props"
:options="categoryList"
//数据源
:clearable="true"
:accordion="true"
:disableds="false"
@getValue="handleChange($event,row)"/>
//点击事件
</el-form-item>
</el-col>
</el-row>

1
2
3
4
5
6
7
8
9
10
11
import SelectTree from "@/views/SelectTree.vue";	//引入
data() {
return {
props:{
value: 'id',
label: 'label',
children: 'children',
},
}
}

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<template>
<el-select :value="valueTitle" :clearable="clearable" :disabled="disableds" @clear="clearHandle">
<el-option :value="valueTitle" :label="valueTitle" class="options">
<el-tree
id="tree-option"
ref="selectTree"
:accordion="accordion"
:data="options"
:props="props"
:node-key="props.value"
:default-expanded-keys="defaultExpandedKey"
@node-click="handleNodeClick">
</el-tree>
</el-option>
</el-select>
</template>
<script>
export default {
name: "el-tree-select",
props:{
/* 配置项 */
props:{
type: Object,
default:()=>{
return {
value:'id',
// ID字段名
label: 'label',
// 显示名称
children: 'children'
// 子级字段名
}
}
},
/* 选项列表数据(树形结构的对象数组) */
options:{
type: Array,
default: ()=>{ return [] }
},
/* 初始值 */
value:{
type: Number,
default: ()=>{ return null }
},
/* 可清空选项 */
clearable:{
type:Boolean,
default:()=>{ return true }
},
rules:{
type:Array
},
/* 禁用 */
disableds:{
type:Boolean,
default:()=>{ return true }
},
/* 自动收起 */
accordion:{
type:Boolean,
default:()=>{ return true }
},
},
data() {
return {
valueId:this.value,
// 初始值
valueTitle:'',
defaultExpandedKey:[]
}
},
mounted(){
this.initHandle()
},
methods: {
// 初始化值
initHandle(){
if(this.valueId){
this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label]
// 初始化显示
this.$refs.selectTree.setCurrentKey(this.valueId)
// 设置默认选中
this.defaultExpandedKey = [this.valueId]
// 设置默认展开
}
this.initScroll()
},
// 初始化滚动条
initScroll(){
this.$nextTick(()=>{
let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
scrollBar.forEach(ele => ele.style.width = 0)
})
},
// 切换选项
handleNodeClick(node){
this.valueTitle = node[this.props.label]
this.valueId = node[this.props.value]
this.$emit('getValue',this.valueId)
this.defaultExpandedKey = []
},
// 清除选中
clearHandle(){
this.valueTitle = ''
this.valueId = null
this.defaultExpandedKey = []
this.clearSelected()
this.$emit('getValue',null)
},
/* 清空选中样式 */
clearSelected(){
let allNode = document.querySelectorAll('#tree-option .el-tree-node')
allNode.forEach((element)=>element.classList.remove('is-current'))
}
},
watch: {
value(){
this.valueId = this.value
this.initHandle()
}
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
height: auto;
max-height: 274px;
padding: 0;
overflow: hidden;
overflow-y: auto;
}
.el-select-dropdown__item.selected{
font-weight: normal;
}
ul li >>>.el-tree .el-tree-node__content{
height:auto;
padding: 0 20px;
}
.el-tree-node__label{
font-weight: normal;
}
.el-tree >>>.is-current .el-tree-node__label{
color: #409EFF;
font-weight: 700;
}
.el-tree >>>.is-current .el-tree-node__children .el-tree-node__label{
color:#606266;
font-weight: normal;
}
</style>

1
2
3
4
5
6
7
@ResponseBody
@RequestMapping("/queryTreeData")
public List<TreeData<Category>> queryTreeData() {
TreeData<Category> tree = categoryService.queryTreeList();
return tree .getChildren();
}

1
2
3
4
public interface CategoryService {
TreeData<Category> queryTreeList();
}

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
@Service
@Transactional
public class CategoryServiceImpl implements CategoryService {
@Override
public TreeData<Category> queryTreeList() {
//查询源数据(根据实际情况调整)
List<Category> categoryList = categoryMapper.queryCategoryList();
//组织数据
List<TreeData<Category>> treeList = new ArrayList<>();
for (Category category: categoryList ) {
TreeData<Category> tree = new TreeData<>();
tree.setParentId(category.getCategoryPid());
tree.setId(category.getCategoryId());
tree.setLabel(category.getCategoryName());
tree.setDomPath(category.getPath());
treeList.add(tree);
}
// 默认顶级菜单数据库存为0，根据实际情况调整
TreeData<Category> tree = this.build(treeList);
return tree;
}
public static <T> TreeData<T> build(List<TreeData<T>> nodes) {
if (nodes == null) {
return null;
}
List<TreeData<T>> topNodes = new ArrayList<>();
for (TreeData<T> children : nodes) {
String pid = children.getParentId();
// 默认顶级菜单数据库存为0，根据实际情况调整
if (pid == null || "0".equals(pid)) {
topNodes.add(children);
continue;
}
for (TreeData<T> parent : nodes) {
String id = parent.getId();
if (id != null && id.equals(pid)) {
parent.getChildren().add(children);
children.setHasParent(true);
parent.setChildren(true);
continue;
}
}
}
TreeData<T> root = new TreeData<T>();
root.setId("-1");
root.setParentId("");
root.setHasParent(false);
root.setChildren(true);
root.setChecked(true);
root.setChildren(topNodes);
root.setLabel("顶级节点");
return root;
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@Data
public class TreeData<T> {
private String id;//节点ID
private String parentId;//父ID
private String label;//显示节点文本
private String domPath;//结构
private List<TreeData<T>> children = new ArrayList<TreeData<T>>();//节点的子节点
private boolean checked = false;//节点是否被选中 true false
private boolean hasParent = false;//是否有父节点
private boolean hasChildren = false;//是否有子节点
private String domDesc;//备注
public void setChildren(boolean isChildren) {
this.hasChildren = isChildren;
}
public void setChildren(List<TreeData<T>> topNodes) {
this.children = topNodes;
}
}