vue3|vue3 Element-UI封装实现TreeSelect 树形下拉选择组件

工作中最近用到树结构的下拉选择器,也是参考别人文档做了下简单封装,还是挺简单易用的。

.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; } .selectInput { padding: 0 5px; box-sizing: border-box; }

使用:

【vue3|vue3 Element-UI封装实现TreeSelect 树形下拉选择组件】比较简单,不过不能使用多选,所以在组件内部屏蔽掉了multiple防止在外部使用该属性。

    推荐阅读