45322740c5a09d4617c4aa49f6d07d7194ea3467e8cfb75d0df96534d9f54301722da0825db218573ed3d8013fe25fc9d66f3bfc4bd6eb8a22332235591212 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  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. <script type="text/babel">
  12. import Emitter from 'element-ui/src/mixins/emitter';
  13. export default {
  14. mixins: [Emitter],
  15. name: 'ElOptionGroup',
  16. componentName: 'ElOptionGroup',
  17. props: {
  18. label: String,
  19. disabled: {
  20. type: Boolean,
  21. default: false
  22. }
  23. },
  24. data() {
  25. return {
  26. visible: true
  27. };
  28. },
  29. watch: {
  30. disabled(val) {
  31. this.broadcast('ElOption', 'handleGroupDisabled', val);
  32. }
  33. },
  34. methods: {
  35. queryChange() {
  36. this.visible = this.$children &&
  37. Array.isArray(this.$children) &&
  38. this.$children.some(option => option.visible === true);
  39. }
  40. },
  41. created() {
  42. this.$on('queryChange', this.queryChange);
  43. },
  44. mounted() {
  45. if (this.disabled) {
  46. this.broadcast('ElOption', 'handleGroupDisabled', this.disabled);
  47. }
  48. }
  49. };
  50. </script>