单选的下拉树形控件

<template><el-select ref=\"test\" :value=\"valueTitle\"><el-option :value=\"valueTitle\" :label=\"valueTitle\"><el-treeid=\"tree-option\"ref=\"selectTree\":accordion=\"accordion\":default-expand-all=\"true\":expand-on-click-node=\"false\":data=\"options\":props=\"props\":node-key=\"props.value\":default-expanded-keys=\"defaultExpandedKey\"@node-click=\"handleNodeClick\"/></el-option></el-select></template><script>export default {name: \'ElTreeSelect\',props: {/* 配置项 */props: {type: Object,default: () => {return {value: \'id\', // ID字段名label: \'title\', // 显示名称children: \'children\' // 子级字段名}}},/* 选项列表数据(树形结构的对象数组) */options: {type: Array,default: () => { return [] }},/* 初始值 */value: {type: Number,default: () => { return null }},/* 可清空选项 */clearable: {type: Boolean,default: () => { return true }},/* 自动收起 */accordion: {type: Boolean,default: () => { return false }}},data() {return {valueId: this.value, // 初始值valueTitle: \'\',defaultExpandedKey: []}},watch: {value() {this.valueId = this.valuethis.initHandle()}},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.$nextTick(() => {const scrollWrap = document.querySelectorAll(\'.el-scrollbar .el-select-dropdown__wrap\')[0]const scrollBar = document.querySelectorAll(\'.el-scrollbar .el-scrollbar__bar\')scrollWrap.style.cssText = \'margin: 0px; max-height: none; overflow: hidden;\'// eslint-disable-next-line no-return-assignscrollBar.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 = []this.$refs.test.handleClose()},// 清除选中clearHandle() {this.valueTitle = \'\'this.valueId = nullthis.defaultExpandedKey = []this.clearSelected()this.$emit(\'getValue\', null)},/* 清空选中样式 */clearSelected() {const allNode = document.querySelectorAll(\'#tree-option .el-tree-node\')allNode.forEach((element) => element.classList.remove(\'is-current\'))}}}</script><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>

效果图：

多选的下拉树形控件

<template><el-select ref=\"test\" multiple @remove-tag=\"removetg\" :value=\"valueTitle\"><el-option :value=\"valueTitle\"><el-treeid=\"tree-option\"ref=\"selectTree\"show-checkbox:accordion=\"accordion\":default-expand-all=\"true\":expand-on-click-node=\"false\":data=\"options\":props=\"props\":node-key=\"props.value\":default-expanded-keys=\"defaultExpandedKey\"@check=\"getCheckedNodes\"/></el-option></el-select></template><script>export default {name: \"ElTreeSelect\",props: {/* 配置项 */props: {type: Object,default: () => {return {value: \"dicitionariesId\", // ID字段名label: \"name\", // 显示名称children: \"children\" // 子级字段名};}},/* 选项列表数据(树形结构的对象数组) */options: {type: Array,default: () => {return [];}},/* 初始值 */value: {type: Number,default: () => {return null;}},/* 可清空选项 */clearable: {type: Boolean,default: () => {return true;}},/* 自动收起 */accordion: {type: Boolean,default: () => {return false;}}},data() {return {valueId: this.value, // 初始值valueTitle: [],defaultExpandedKey: [],checkedList:[]};},watch: {value() {this.valueId = this.value;this.initHandle();}},mounted() {this.initHandle();},methods: {removetg(n) {this.valueTitle.splice(this.valueTitle.indexOf(n), 1)this.checkedList = this.checkedList.filter(el => {return el[this.props.label] !== n})this.$refs.selectTree.setCheckedNodes(this.checkedList)this.$emit(\"getValue\", this.checkedList)},getCheckedNodes(node) {this.valueTitle = [];this.checkedList = this.$refs.selectTree.getCheckedNodes().filter(el => {return el[this.props.value] !== this.options[0][this.props.value];}).filter(el => {return el[this.props.value] !== this.options[0].children[0][this.props.value];})this.checkedList.forEach(el => {this.valueTitle.push(el[this.props.label])})this.$emit(\"getValue\", this.checkedList)},// 初始化值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.$nextTick(() => {const scrollWrap = document.querySelectorAll(\".el-scrollbar .el-select-dropdown__wrap\")[0];const scrollBar = document.querySelectorAll(\".el-scrollbar .el-scrollbar__bar\");scrollWrap.style.cssText =\"margin: 0px; max-height: none; overflow: hidden;\";// eslint-disable-next-line no-return-assignscrollBar.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 = []this.$refs.test.handleClose();},// 清除选中clearHandle() {this.valueTitle = \"\";this.valueId = null;this.defaultExpandedKey = [];this.clearSelected();this.$emit(\"getValue\", null);},/* 清空选中样式 */clearSelected() {const allNode = document.querySelectorAll(\"#tree-option .el-tree-node\");allNode.forEach(element => element.classList.remove(\"is-current\"));}}};</script><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>

效果图 ：

使用方法：