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

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: {// 配置項props: { type: Object, default: () => {return { value: 'id', children: 'children', label: 'name'} }},// 選項列表數據(樹形結構的對象數組)options: { type: Array, default: () => {return [] }},// 初始值（單選）value: { type: Object, default: () => {return {} }},// 初始值（多選）valueMultiple: { type: Array, default: () => {return [] }},// 可清空選項clearable: { type: Boolean, default: true},// 自動收起accordion: { type: Boolean, default: false},// 是否多選multiple: { type: Boolean, default: false} }, data() {return { resultValue: [], // 傳給父組件的數組對象值 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()},// 初始化滾動條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) })},// 切換選項handleNodeClick(node) { // 設置點擊葉子節點后被選中 可以更改為點擊父節點也生效 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); }},// 從輸入框中直接刪除某個值時changeValue(val) { if (this.multiple) {// 多選（同時刪掉傳給父組件中多余的值，再傳給父組件）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.頁面引入組件使用<template> <div class='selectTree'> <label>請選擇：</label> <!-- 單選 + 默認值 --> <!-- <el-select-tree :options='options' :value='value' @getValue='getSelectedValue'></el-select-tree> --> <!-- 多選 + 默認值 --> <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 { // 開啟/關 多選/單選 multiple: true, value: {id: 3,name: '張三' }, valueMultiple: [{ id: 3, name: '張三'}, { id: 4, name: '李四'} ], options: [{ id: 1, name: '一組', children: [{ id: 2, name: '第一隊', 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: { // 組件傳出來的選中結果 getSelectedValue(value) { console.log('選中的結果值', value) } }}</script><style lang='scss'></style>總結

到此這篇關于vue2+elementUI實現下拉樹形多選框效果的文章就介紹到這了,更多相關vue2+elementUI下拉樹形多選框內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！