| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168 | 
							- <template>
 
-   <li
 
-     @mouseenter="hoverItem"
 
-     @click.stop="selectOptionClick"
 
-     class="el-select-dropdown__item"
 
-     v-show="visible"
 
-     :class="{
 
-       'selected': itemSelected,
 
-       'is-disabled': disabled || groupDisabled || limitReached,
 
-       'hover': hover
 
-     }">
 
-     <slot>
 
-       <span>{{ currentLabel }}</span>
 
-     </slot>
 
-   </li>
 
- </template>
 
- <script type="text/babel">
 
-   import Emitter from 'element-ui/src/mixins/emitter';
 
-   import { getValueByPath, escapeRegexpString } from 'element-ui/src/utils/util';
 
-   export default {
 
-     mixins: [Emitter],
 
-     name: 'ElOption',
 
-     componentName: 'ElOption',
 
-     inject: ['select'],
 
-     props: {
 
-       value: {
 
-         required: true
 
-       },
 
-       label: [String, Number],
 
-       created: Boolean,
 
-       disabled: {
 
-         type: Boolean,
 
-         default: false
 
-       }
 
-     },
 
-     data() {
 
-       return {
 
-         index: -1,
 
-         groupDisabled: false,
 
-         visible: true,
 
-         hitState: false,
 
-         hover: false
 
-       };
 
-     },
 
-     computed: {
 
-       isObject() {
 
-         return Object.prototype.toString.call(this.value).toLowerCase() === '[object object]';
 
-       },
 
-       currentLabel() {
 
-         return this.label || (this.isObject ? '' : this.value);
 
-       },
 
-       currentValue() {
 
-         return this.value || this.label || '';
 
-       },
 
-       itemSelected() {
 
-         if (!this.select.multiple) {
 
-           return this.isEqual(this.value, this.select.value);
 
-         } else {
 
-           return this.contains(this.select.value, this.value);
 
-         }
 
-       },
 
-       limitReached() {
 
-         if (this.select.multiple) {
 
-           return !this.itemSelected &&
 
-             (this.select.value || []).length >= this.select.multipleLimit &&
 
-             this.select.multipleLimit > 0;
 
-         } else {
 
-           return false;
 
-         }
 
-       }
 
-     },
 
-     watch: {
 
-       currentLabel() {
 
-         if (!this.created && !this.select.remote) this.dispatch('ElSelect', 'setSelected');
 
-       },
 
-       value(val, oldVal) {
 
-         const { remote, valueKey } = this.select;
 
-         if (!this.created && !remote) {
 
-           if (valueKey && typeof val === 'object' && typeof oldVal === 'object' && val[valueKey] === oldVal[valueKey]) {
 
-             return;
 
-           }
 
-           this.dispatch('ElSelect', 'setSelected');
 
-         }
 
-       }
 
-     },
 
-     methods: {
 
-       isEqual(a, b) {
 
-         if (!this.isObject) {
 
-           return a === b;
 
-         } else {
 
-           const valueKey = this.select.valueKey;
 
-           return getValueByPath(a, valueKey) === getValueByPath(b, valueKey);
 
-         }
 
-       },
 
-       contains(arr = [], target) {
 
-         if (!this.isObject) {
 
-           return arr && arr.indexOf(target) > -1;
 
-         } else {
 
-           const valueKey = this.select.valueKey;
 
-           return arr && arr.some(item => {
 
-             return getValueByPath(item, valueKey) === getValueByPath(target, valueKey);
 
-           });
 
-         }
 
-       },
 
-       handleGroupDisabled(val) {
 
-         this.groupDisabled = val;
 
-       },
 
-       hoverItem() {
 
-         if (!this.disabled && !this.groupDisabled) {
 
-           this.select.hoverIndex = this.select.options.indexOf(this);
 
-         }
 
-       },
 
-       selectOptionClick() {
 
-         if (this.disabled !== true && this.groupDisabled !== true) {
 
-           this.dispatch('ElSelect', 'handleOptionClick', [this, true]);
 
-         }
 
-       },
 
-       queryChange(query) {
 
-         this.visible = new RegExp(escapeRegexpString(query), 'i').test(this.currentLabel) || this.created;
 
-         if (!this.visible) {
 
-           this.select.filteredOptionsCount--;
 
-         }
 
-       }
 
-     },
 
-     created() {
 
-       this.select.options.push(this);
 
-       this.select.cachedOptions.push(this);
 
-       this.select.optionsCount++;
 
-       this.select.filteredOptionsCount++;
 
-       this.$on('queryChange', this.queryChange);
 
-       this.$on('handleGroupDisabled', this.handleGroupDisabled);
 
-     },
 
-     beforeDestroy() {
 
-       const { selected, multiple } = this.select;
 
-       let selectedOptions = multiple ? selected : [selected];
 
-       let index = this.select.cachedOptions.indexOf(this);
 
-       let selectedIndex = selectedOptions.indexOf(this);
 
-       // if option is not selected, remove it from cache
 
-       if (index > -1 && selectedIndex < 0) {
 
-         this.select.cachedOptions.splice(index, 1);
 
-       }
 
-       this.select.onOptionDestroy(this.select.options.indexOf(this));
 
-     }
 
-   };
 
- </script>
 
 
  |