element封装Select树形下拉框，Avue自定义Select树形下拉框_element树状下拉框

​
最近业务需求，要做一个树形的下拉框，分别是一级分类、二级分类，而且一级互斥，二级多选，现有的结构都满足不了业务需求，并且样式什么的也不一样，所以只能手写一个，下面是设计图样式

需求：一级分类只能选择一个，每次选择要清除二级分类，重新计算二级分类内容，二级分类可以多选

废话不多说，上代码：

// 父组件
<template slot="clazzIdForm" slot-scope="{row}">
	<store-classify ref="storeClassify" @validateClazzId="validateClazzId" :classifyData="classifyData" :storeClassifyVisible.sync="storeClassifyVisible" :secondClassifyVisible.sync="secondClassifyVisible" :secondClassifyData.sync="secondClassifyData" :clazzName.sync="clazzName" :clazzId.sync="clazzId" :tags.sync="tags"></store-classify>
</template>

// 子组件
<template>
    <div class="classify">
        <div @click.stop="isShowClassify">
            <span v-if="clazzName" :class="[ !tags.length ? 'mb5' : '']">{{ clazzName }}<i class="el-icon-close" @click.stop="clearClassify" :gutter="10"></i></span>
            <p v-else>请选择&nbsp;店铺分类</p>
            <span class="secondClazz" v-for="item in tags" :key="item">{{ item }}<i class="el-icon-close" @click.stop="deleteClassify(item)" :gutter="10"></i></span>
        </div>
        <div @click.stop="isShowClassify">
            <i class="el-icon-arrow-down" v-if="!storeClassifyVisible"></i>
            <i class="el-icon-arrow-up" v-else></i>
        </div>
        <div class="storeClassify" v-if="storeClassifyVisible" v-ClickOutSide>
            <ul class="first">
                <li v-for="item in classifyData" :key="item.id" @click="selectFirstClassify(item)" :class="[clazzName === item.name ? 'active' : '']">{{ item.name }}</li>
            </ul>
            <!-- <el-divider></el-divider> -->
            <ul class="second" v-if="secondClassifyVisible">
                <li v-for="item in secondClassifyData" :key="item" @click="selectSecondClassify(item)" :class="[tags.includes(item) ? 'active' : '']">{{ item }}</li>
            </ul>
        </div>
    </div>
</template>

<script>

let that
export default {
    name: 'MainStoreClassify',
    props: {
        classifyData:{
            type: Array,
            default: [],
        },
        storeClassifyVisible:{
            type: Boolean,
            default: false,
        },
        secondClassifyVisible:{
            type: Boolean,
            default: false,
        },
        secondClassifyData:{
            type: Array,
            default: [],
        },
        clazzName:{
            type: String,
            default: '',
        },
        clazzId:{
            type: String,
            default: '',
        },
        tags:{
            type: Array,
            default: [],
        },

    },
    data() {
        return {
            // classifyData: [],
            // storeClassifyVisible: false,
            // secondClassifyVisible: false,
            // secondClassifyData: [],
            // clazzName: '',
            // clazzId: '',
            // tags: [],
            handleFun: null,
        };
    },
    created() {
        that = this
    },
    directives: {
        ClickOutSide: {
            bind(el, binding) {
                async function handleFun(e) { // 判断所点击dom是否为el的节点
                    let classifyElement = await document.querySelector('.classify')
                    console.log(classifyElement);
                    if (el.contains(e.target) || classifyElement.contains(e.target)) {
                        console.log('在节点内')
                    } else {
                        console.log('在节点外')
                        that.storeClassifyVisible = false
                        that.$emit('update:storeClassifyVisible', that.storeClassifyVisible)
                        window.removeEventListener('mousedown', el.function)
                    }
                }
                el.function = handleFun
                that.handleFun = el.function
                window.addEventListener('mousedown', handleFun)
            }
        }
    },

    methods: {
        // 是否展开分类树
        isShowClassify(e){
            // console.log(e.target.nodeName);
            if(e.target.nodeName === 'SPAN') return
            this.storeClassifyVisible = !this.storeClassifyVisible
            this.$emit("update:storeClassifyVisible", this.storeClassifyVisible)
            if(this.storeClassifyVisible && this.clazzName){
                this.$nextTick(()=>{
                    // console.log(this.classifyData.filter(item=> item.name === this.clazzName));
                    this.secondClassifyData = this.classifyData.filter(item=> item.name === this.clazzName)[0].subClazzName
                    this.secondClassifyVisible = true
                    this.$emit("update:secondClassifyData", this.secondClassifyData)
                    this.$emit("update:secondClassifyVisible", this.secondClassifyVisible)
                })
            }
        },
        // 选择一级分类
        selectFirstClassify(item){
            // console.log(item);
            this.tags = []
            if(this.clazzName === item.name) {
                // this.$nextTick(()=>{
                    this.secondClassifyData = []
                    this.clazzName = ''
                    this.clazzId = ''
                    this.secondClassifyVisible = false
                    // this.secondClassifyData = []
                    this.$emit("update:tags", this.tags)
                    this.$emit("update:secondClassifyVisible", this.secondClassifyVisible)
                    this.$emit("update:clazzName", this.clazzName)
                    this.$emit("update:clazzId", this.clazzId)
                    this.$emit("update:secondClassifyVisible", this.secondClassifyVisible)
                // })
                this.$emit('validateClazzId')
                return 
            }
            this.clazzName = item.name
            this.clazzId = item.id
            this.secondClassifyVisible = true
            this.secondClassifyData = [...item.subClazzName]
            this.$emit("update:tags", this.tags)
            this.$emit("update:clazzName", this.clazzName)
            this.$emit("update:clazzId", this.clazzId)
            this.$emit("update:secondClassifyVisible", this.secondClassifyVisible)
            this.$emit("update:secondClassifyData", this.secondClassifyData)
            this.$emit('validateClazzId')
        },
        // 选择二级分类
        selectSecondClassify(item){
            // console.log(item);
            if(this.tags.includes(item)){
                this.tags.splice(this.tags.indexOf(item), 1)
                this.$emit("update:tags", this.tags)
                return 
            }
            this.tags.push(item)
        },
        // 清除一级分类
        clearClassify(){
            this.clazzName = ''
            this.tags = []
            this.secondClassifyData = []
            this.secondClassifyVisible = false
            this.$emit("update:clazzName", this.clazzName)
            this.$emit("update:tags", this.tags)
            this.$emit("update:secondClassifyData", this.secondClassifyData)
            this.$emit("update:secondClassifyVisible", this.secondClassifyVisible)
            this.$emit('validateClazzId')
        },
        // 清除二级分类
        deleteClassify(item){
            this.tags.splice(this.tags.indexOf(item), 1)
            this.$emit("update:tags", this.tags)
        },
    },
};
</script>

<style lang="scss" scoped>
:deep(.el-form-item__content) {
    min-height: 32px;
}
.classify {
    padding-left: 5px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    min-height: 32px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    color: #606266;
    user-select: none;
    & > div:nth-child(1) {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        font-family: 'OPPOSans';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        .el-icon-close {
            padding-left: 8px;
            cursor: pointer;
            &:hover {
                color: red;
            }
        }
        span {
            margin-left: 5px;
            margin-top: 5px;
            display: flex;
            align-items: center;
            padding: 0px 10px;
            height: 24px;
            // width: 59px;
            background: #FFFFFF;
            border: 1px solid #DCDFE6;
            border-radius: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            &.mb5 {
                margin-bottom: 5px;
            }
        }
        p {
            margin: 0;
            padding-left: 10px;
            color: #c0c4cc;
            font-size: 13px;
        }
        // ul {
        //     margin: 0;
        //     display: flex;
            .secondClazz {
                margin-top: 5px;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                padding: 0px 10px;
                height: 24px;
                line-height: 24px;
                // width: 59px;
                background: #FFFFFF;
                border: 1px solid #DCDFE6;
                border-radius: 2px;
                &:last-child {
                    margin-bottom: 5px;
                }
            }
        // }
    }
    & > div:nth-child(2) {
        padding-right: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 25px;
        i {
            color: #C0C4CC;
        }
    }
    .storeClassify {
        padding: 13px;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 500px;
        overflow-y: auto;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        background-color: #fff;
        transform: translateY(10px);
        z-index: 999;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        .first {
            padding-left: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            // justify-content: space-between;
            border-bottom: 1px solid rgba(220, 223, 230, 1);
            li {
                margin-right: 6px;
                margin-bottom: 6px;
                width: 88px;
                height: 30px;
                text-align: center;
                border: 1px solid #DCDFE6;
                border-radius: 4px;
                cursor: pointer;
                &.active {
                    background-color: rgba(0, 168, 255, 1);
                    border: 1px solid rgba(0, 168, 255, 1);
                    color: #fff;
                }
            }
        }
        .second {
            padding-left: 0;
            padding-top: 13px;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            // justify-content: space-between;
            // padding: 13px;
            li {
                margin-right: 6px;
                margin-bottom: 6px;
                width: 88px;
                height: 30px;
                text-align: center;
                border: 1px solid #DCDFE6;
                border-radius: 4px;
                cursor: pointer;
                &.active {
                    background-color: rgba(230, 246, 255, 1);
                    border: 1px solid rgba(0, 168, 255, 1);
                    color: rgba(0, 168, 255, 1);
                }
            }
        }
    }
}
</style> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332

注意点：
（1）父组件使用.sync，双向绑定数据，子组件可以通过this.$emit(“update:secondClassifyData”,
this.secondClassifyData)修改父组件数据
（2）可以使用自定义指令来判断是否需要点击外部区域关闭select框，点击事件为mousedown，不能为click

所有功能到这里就已经完成了，剩下的就是父组件的一些处理了，比如按ESC关闭框，再按一下才关闭dialog等等，这些都是小问题，就不放代码了，记录一下~

最后效果图