目錄效果如圖所示：1.新建el-select-tree.vue組件2.頁(yè)面引入組件使用總結(jié)效果如圖所示：

1.新建el-select-tree.vue組件<!-- * 下拉樹形選擇--><template> <el-select ref='selectTree' :value='value' v-model='valueName' :multiple='multiple' :clearable='clearable'@clear='clearHandle' @change='changeValue'><el-option :value='valueName' class='options'> <el-tree ref='selectTree' :accordion='accordion' :data='options' :props='props':node-key='props.value' @node-click='handleNodeClick'><span slot-scope='{ data }'> <i :class='[data.color != null ? 'ification_col' : '']':style='{ 'background-color': data.color }'></i>&nbsp;&nbsp;{{ data.name }}</span> </el-tree></el-option> </el-select></template><script>export default { name: 'el-tree-select', props: {// 配置項(xiàng)props: { type: Object, default: () => {return { value: 'id', children: 'children', label: 'name'} }},// 選項(xiàng)列表數(shù)據(jù)(樹形結(jié)構(gòu)的對(duì)象數(shù)組)options: { type: Array, default: () => {return [] }},// 初始值（單選）value: { type: Object, default: () => {return {} }},// 初始值（多選）valueMultiple: { type: Array, default: () => {return [] }},// 可清空選項(xiàng)clearable: { type: Boolean, default: true},// 自動(dòng)收起accordion: { type: Boolean, default: false},// 是否多選multiple: { type: Boolean, default: false} }, data() {return { resultValue: [], // 傳給父組件的數(shù)組對(duì)象值 valueName: this.multiple ? [] : '' // 輸入框顯示值} }, watch: {value() { this.resultValue = this.multiple ? this.valueMultiple : this.value; // 初始值 this.initHandle()} }, mounted() {this.resultValue = this.multiple ? this.valueMultiple : this.value; // 初始值this.initHandle(); }, methods: {// 初始化顯示initHandle() { if (this.resultValue) {if (this.multiple) { // 多選 this.resultValue.forEach(item => this.valueName.push(item.name));} else { // 單選 this.valueName = this.resultValue.name;} } this.initScroll()},// 初始化滾動(dòng)條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) })},// 切換選項(xiàng)handleNodeClick(node) { // 設(shè)置點(diǎn)擊葉子節(jié)點(diǎn)后被選中 可以更改為點(diǎn)擊父節(jié)點(diǎn)也生效 if (node.children == null || node.children == undefined) {if (this.multiple) { // 多選（判重后添加） let num = 0; this.valueName.forEach(item => {item == node[this.props.label] ? num++ : num; }) if (num == 0) {this.valueName.push(node[this.props.label]); // 輸入框顯示值this.resultValue.push(node); }} else { // 單選 this.$refs.selectTree.blur(); this.valueName = node[this.props.label]; this.resultValue = node;}this.$emit('getValue', this.resultValue); }},// 從輸入框中直接刪除某個(gè)值時(shí)changeValue(val) { if (this.multiple) {// 多選（同時(shí)刪掉傳給父組件中多余的值，再傳給父組件）this.resultValue.map((item, index) => { let i = val.indexOf(item.name) if (i == -1) {this.resultValue.splice(index, 1) }})this.$emit('getValue', this.resultValue); } else {// 單選this.$emit('getValue', val); }},// 清除選中clearHandle() { this.valueName = this.multiple ? [] : '' 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 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;}</style>2.頁(yè)面引入組件使用<template> <div class='selectTree'> <label>請(qǐng)選擇：</label> <!-- 單選 + 默認(rèn)值 --> <!-- <el-select-tree :options='options' :value='value' @getValue='getSelectedValue'></el-select-tree> --> <!-- 多選 + 默認(rèn)值 --> <el-select-tree :options='options' :multiple='multiple' :valueMultiple='valueMultiple' @getValue='getSelectedValue'></el-select-tree> </div></template><script>import elSelectTree from '../components/el-select-tree.vue'export default { components: { elSelectTree }, data() { return { // 開啟/關(guān) 多選/單選 multiple: true, value: {id: 3,name: '張三' }, valueMultiple: [{ id: 3, name: '張三'}, { id: 4, name: '李四'} ], options: [{ id: 1, name: '一組', children: [{ id: 2, name: '第一隊(duì)', children: [{ id: 3, name: '小張' }, { id: 4, name: '小劉' }] }]},{ id: 5, name: '二組', children: [{ id: 6, name: '小馬' }, { id: 7, name: '小麗' }]},{ id: 8, name: '三組', children: [{ id: 9, name: '小韓' }, { id: 10, name: '小錢' }]} ] } }, created() { }, methods: { // 組件傳出來的選中結(jié)果 getSelectedValue(value) { console.log('選中的結(jié)果值', value) } }}</script><style lang='scss'></style>總結(jié)

到此這篇關(guān)于vue2+elementUI實(shí)現(xiàn)下拉樹形多選框效果的文章就介紹到這了,更多相關(guān)vue2+elementUI下拉樹形多選框內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！