1 | <template>
|
2 | <ul class="el-select-group__wrap" v-show="visible">
|
3 | <li class="el-select-group__title">{{ label }}</li>
|
4 | <li>
|
5 | <ul class="el-select-group">
|
6 | <slot></slot>
|
7 | </ul>
|
8 | </li>
|
9 | </ul>
|
10 | </template>
|
11 |
|
12 | <script type="text/babel">
|
13 | import Emitter from 'element-ui/src/mixins/emitter';
|
14 |
|
15 | export default {
|
16 | mixins: [Emitter],
|
17 |
|
18 | name: 'ElOptionGroup',
|
19 |
|
20 | componentName: 'ElOptionGroup',
|
21 |
|
22 | props: {
|
23 | label: String,
|
24 | disabled: {
|
25 | type: Boolean,
|
26 | default: false
|
27 | }
|
28 | },
|
29 |
|
30 | data() {
|
31 | return {
|
32 | visible: true
|
33 | };
|
34 | },
|
35 |
|
36 | watch: {
|
37 | disabled(val) {
|
38 | this.broadcast('ElOption', 'handleGroupDisabled', val);
|
39 | }
|
40 | },
|
41 |
|
42 | methods: {
|
43 | queryChange() {
|
44 | this.visible = this.$children &&
|
45 | Array.isArray(this.$children) &&
|
46 | this.$children.some(option => option.visible === true);
|
47 | }
|
48 | },
|
49 |
|
50 | created() {
|
51 | this.$on('queryChange', this.queryChange);
|
52 | },
|
53 |
|
54 | mounted() {
|
55 | if (this.disabled) {
|
56 | this.broadcast('ElOption', 'handleGroupDisabled', this.disabled);
|
57 | }
|
58 | }
|
59 | };
|
60 | </script>
|