components 文件下新建 SelectTree文件 index.vue
SelectTree index.vue
<!--* 下拉树形选择 组件--><template><el-select ref="select" style="min-width: 260px" :value="value" v-model="valueName" collapse-tags :multiple="multiple" :clearable="clearable" @change="changeValue"><!-- @clear="clearHandle" --><el-option :value="valueName" class="options"><el-treeshow-checkbox:default-expanded-keys="openTree"id="tree-option"ref="selectTree":accordion="accordion":data="options":props="props":node-key="props.value"@check-change="handleCheckChange"><span slot-scope="{ data }"> <i :class="[data.color != null ? 'ification_col' : '']" :style="{ 'background-color': data.color }"></i> {{ data.name }} </span></el-tree></el-option></el-select></template><script>export default {name: 'el-tree-select',props: {// 配置项props: {type: Object,default: () => {return {value: 'id',children: 'children',label: 'name'}}},// 初始值（单选）value: {type: Object,default: () => {return {}}},// 初始值（多选）valueMultiple: {type: Array,default: () => {return []}},// 可清空选项clearable: {type: Boolean,default: false},// 自动收起accordion: {type: Boolean,default: false},// 是否支持多选multiple: {type: Boolean,default: true}},data () {return {options: [],resultValue: [], // 传给父组件的数组对象值valueName: [], // 输入框显示值openTree: [] // 需要展开的id}},watch: {value () {this.resultValue = this.valueMultiple // 初始值this.initHandle()}},mounted () {this.getSelectTreeList()this.resultValue = this.valueMultiple // 初始值this.initHandle()},methods: {// 获取 部门 treegetSelectTreeList: function () {this.$api.dept.findDeptTree().then((res) => {if (res.data.length) {const { children } = res.data[0] || {}this.options = children// 默认展开的 idthis.options.forEach((item) => {this.openTree.push(item.id)if (item.children && item.children.length > 0) {this.openTreeList(item.children)}})}})},// 初始化显示initHandle () {if (this.resultValue) {this.resultValue.forEach((item) => this.valueName.push(item.name))}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))})},// 从输入框中直接删除某个值时changeValue (val) {// 多选（同时删掉传给父组件中多余的值，再传给父组件）this.resultValue.map((item, index) => {let i = val.indexOf(item.name)if (i === -1) {this.resultValue.splice(index, 1)}})this.$emit('getValue', this.resultValue)},// 勾选 /反选handleCheckChange (data, checked, indeterminate) {this.valueName = []if (checked) {// 选中if (!data.children.length) {this.resultValue.push(data)}} else {// 取消勾选const { name } = datathis.resultValue.map((item, index) => {if (name === item.name) {this.resultValue.splice(index, 1)}})}this.resultValue.forEach((item) => {this.valueName.push(item.name) // 输入框显示值})this.$emit('getValue', this.resultValue)},// 默认展开全部openTreeList (list) {list.forEach((item) => {this.openTree.push(item.id)if (item.children && item.children.length) {this.openTreeList(item.children)}})}// 清除选中// clearHandle () {// this.valueName = []// this.resultValue = []// this.clearSelected()// this.$emit('getValue', this.resultValue)// },// // 清空选中样式// clearSelected () {// let allNode = document.querySelectorAll('#tree-option .el-tree-node')// allNode.forEach((element) => element.classList.remove('is-current'))// }}}</script><style lang="scss" scoped>.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {height: auto;max-height: 300px;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;}.el-popper {z-index: 9999;}.ification_col {width: 20px;height: 10px;display: inline-block;}.el-select-dropdown__item::-webkit-scrollbar {display: none !important;}.el-select {::v-deep.el-tag__close {display: none !important; //隐藏在下拉框多选时单个删除的按钮}}</style>
使用：
<template><!-- 省略其他部分--><el-form-item label="单位/部门："><el-select-tree :valueMultiple="valueMultiple" @getValue="getSelectedValue"></el-select-tree></el-form-item></template>import elSelectTree from '../../components/SelectTree'export default {components: {elSelectTree},data () {return {valueMultiple: []}},methods: {getSelectedValue (value) {console.log('选中的结果值', value)}}
