components 文件下新建 SelectTree文件 index.vue
SelectTree index.vue文章来源：https://www.toymoban.com/news/detail-547038.html
<!--* 下拉树形选择 组件-->
<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-tree
show-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: {
// 获取 部门 tree
getSelectTreeList: function () {
this.$api.dept.findDeptTree().then((res) => {
if (res.data.length) {
const { children } = res.data[0] || {}
this.options = children
// 默认展开的 id
this.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 } = data
this.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>
使用：文章来源地址https://www.toymoban.com/news/detail-547038.html
<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)
}
}
到了这里，关于vue element select下拉框树形多选的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
