我使用的element-ui的版本是1.4.13。

如上图所示，使用el-select组件，要实现可搜索、可复选、可创建条目时，展示样式是如上图所示，输入框的高度会撑开，影响页面布局，按照产品的需求，要调整为以下样式：

1、复选时，输入框中不以标签的形式展示，而是以字符串的形式展示。

2、超出部分显示省略号，并且鼠标移入显示提示框，用来展示全选的内容。

下面是源码修改部分：

（1）在select的props中添加了一个参数noTag用来控制是否以字符串形式显示输入框中的数据。添加了上面的el-popover标签，主要是文字超出时显示，这个后面再讲。底下的span标签就是在noTag参数为true时显示，data中添加currentSelLabel，用来显示处理后的多选数据，将数组转成字符串。

（2）在这里加了一个类，主要是方便后面加span标签的css样式。在select.css文件中的css样式如下面代码所示：

  1. .el-select__tags.noTags .noTagSpan{
  2.     display: inline-block;
  3.     font-size: 12px;
  4.     width: 100%;
  5.     padding:0 6px;
  6.     overflow: hidden; /*自动隐藏文字*/
  7.     text-overflow: ellipsis; /*文字隐藏后添加省略号*/
  8.     white-space: nowrap; /*强制不换行*/
  9. }

（3）在noTag参数为true时显示class="noTagSpan"的span标签时，对应的el-tag标签就不再显示，如图所示，也需要在el-tag标签中添加noTag控制

（4）在setSelected方法中处理多选时的数据，将数组转成字符串，如下图所示：

（5）文字超出时显示提示框，效果如下：

需要在methods中添加如下方法：

  1.  //当复选时文字超出输入框，出现提示框
  2.         showSpanTooltip: function (event) {
  3.             if(!this.showpop) return;
  4.             var ev = event || window.event;
  5.             var eventName = ev.target.className;
  6.             if (eventName.indexOf('noTagSpan') != -1) {
  7.                 if (ev.target.offsetWidth < ev.target.scrollWidth) {
  8.                     var tooltip = this.$refs.textTooltip;
  9.                     tooltip.referenceElm = ev.target;
  10.                     tooltip.$refs.popper.style.display = 'none';
  11.                     tooltip.doDestroy();
  12.                     tooltip.showPopper = true;
  13.                 }
  14.             }
  15.         },
  16.         //当复选时文字超出输入框，隐藏提示框
  17.         hiddenSpanTooltip: function () {
  18.             if(!this.showpop) return;
  19.             const tooltip = this.$refs.textTooltip;
  20.             if (tooltip) {
  21.                 tooltip.doClose() ;
  22.                 tooltip.doDestroy();
  23.             }
  24.         }

（6）多选时，可搜索。按照组件现在的，搜索框会在选项的下面出现，这样会撑开输入框的高度。

这里需要调整，将输入框放在下面的下拉菜单中，如图所示：



代码如下：



避免跟element原有的搜索框冲突，加了参数控制：

需要在select.css加入如下样式：

  1. .noTagInputDiv{
  2.     border: 1px solid rgb(191, 193, 217);
  3.     margin-left: -1px;
  4.     margin-top:-30px;
  5.     width: 100%;
  6.     max-width: 185px;
  7.     padding-right: 30px;
  8.     overflow: hidden; /*自动隐藏文字*/
  9.     text-overflow: ellipsis; /*文字隐藏后添加省略号*/
  10.     white-space: nowrap; /*强制不换行*/
  11. }

这个时候需要在下拉出现的时候调整整个下拉菜单的位置，具体修改代码的地方如下：

在data中加入initPopperTop，用来记录初始时下拉菜单的位置：

1、在watch中的visible中



2、在watch中的query中



3、methods的resetInputHeight方法中

（7）多选时并且可搜索时，如果条目不存在时，创建条目，并且显示在下拉菜单中，这样可以通过反选删除选中的数据。

1、添加el-option标签，用来显示创建的条目。在data中添加mulOptions数组，用来记录创建的条目。

2、handleOptionSelect方法中处理数据

3、在option.vue的props中添加optcreated

ok,所有的就改完了，效果如图所示：

以下附源码：

  1. <template>
  2.   <div
  3.     class="el-select"
  4.     v-clickoutside="handleClose">
  5.     <div
  6.       class="el-select__tags"
  7.       :class="{'noTags':noTag}"
  8.       v-if="multiple"
  9.       @click.stop="toggleMenu"
  10.       ref="tags"
  11.       :style="{ 'max-width': inputWidth - 32 + 'px' }">
  12.       <transition-group @after-leave="resetInputHeight">
  13.         <el-tag
  14.           v-if="!noTag"
  15.           v-for="item in selected"
  16.           :key="getValueKey(item)"
  17.           closable
  18.           :hit="item.hitState"
  19.           type="primary"
  20.           @close="deleteTag($event, item)"
  21.           close-transition>
  22.           <span class="el-select__tags-text">{{ item.currentLabel }}</span>
  23.         </el-tag>
  24.       </transition-group>
  26.         <el-popover
  27.              ref="textTooltip"
  28.              placement="top-start"
  29.              width="200"
  30.              trigger="hover"
  31.              :content="currentSelLabel">
  32.         </el-popover>
  33.         <span v-if="noTag" class="noTagSpan"
  34.               @mouseenter="showSpanTooltip($event)" @mouseleave="hiddenSpanTooltip($event)">
  35.             {{currentSelLabel}}
  36.         </span>
  37.       <input
  38.         type="text"
  39.         class="el-select__input"
  40.         :class="`is-${ size }`"
  41.         @focus="visible = true"
  42.         :disabled="disabled"
  43.         @keyup="managePlaceholder"
  44.         @keydown="resetInputState"
  45.         @keydown.down.prevent="navigateOptions('next')"
  46.         @keydown.up.prevent="navigateOptions('prev')"
  47.         @keydown.enter.prevent="selectOption"
  48.         @keydown.esc.stop.prevent="visible = false"
  49.         @keydown.delete="deletePrevTag"
  50.         v-model="query"
  51.         :debounce="remote ? 300 : 0"
  52.         v-if="filterable && !noTag"
  53.         :style="{ width: inputLength + 'px', 'max-width': inputWidth - 42 + 'px' }"
  54.         ref="input">
  55.     </div>
  56.     <el-input
  57.       ref="reference"
  58.       v-model="selectedLabel"
  59.       type="text"
  60.       :placeholder="currentPlaceholder"
  61.       :name="name"
  62.       :size="size"
  63.       :disabled="disabled"
  64.       :readonly="!filterable || multiple"
  65.       :validate-event="false"
  66.       @focus="handleFocus"
  67.       @click="handleIconClick"
  68.       @mousedown.native="handleMouseDown"
  69.       @keyup.native="debouncedOnInputChange"
  70.       @keydown.native.down.prevent="navigateOptions('next')"
  71.       @keydown.native.up.prevent="navigateOptions('prev')"
  72.       @keydown.native.enter.prevent="selectOption"
  73.       @keydown.native.esc.stop.prevent="visible = false"
  74.       @keydown.native.tab="visible = false"
  75.       @paste.native="debouncedOnInputChange"
  76.       @mouseenter.native="inputHovering = true"
  77.       @mouseleave.native="inputHovering = false"
  78.       :icon="iconClass">
  79.     </el-input>
  80.     <transition
  81.       name="el-zoom-in-top"
  82.       @before-enter="handleMenuEnter"
  83.       @after-leave="doDestroy">
  84.       <el-select-menu
  85.         ref="popper"
  86.         v-show="visible && emptyText !== false">
  87.           <!--有noTag时搜索框在下面显示-->
  88.           <div  v-if="filterable && noTag && multiple" :class="{'noTagInputDiv':noTag}">
  89.               <input
  90.                   type="text"
  91.                   class="el-select__input"
  92.                   :class="`is-${ size }`"
  93.                   @focus="visible = true"
  94.                   :disabled="disabled"
  95.                   @keyup="managePlaceholder"
  96.                   @keydown="resetInputState"
  97.                   @keydown.down.prevent="navigateOptions('next')"
  98.                   @keydown.up.prevent="navigateOptions('prev')"
  99.                   @keydown.enter.prevent="selectOption"
  100.                   @keydown.esc.stop.prevent="visible = false"
  101.                   @keydown.delete="deletePrevTag"
  102.                   v-model="query"
  103.                   :debounce="remote ? 300 : 0"
  104.                   v-if="filterable && noTag && multiple"
  105.                   :style="{ width: inputLength + 'px', 'max-width': inputWidth - 42 + 'px' }"
  106.                   ref="input">
  107.             </div>
  108.         <el-input v-model="search" @focus="visible = true" v-if="searchable"></el-input>
  109.         <el-scrollbar
  110.           tag="ul"
  111.           wrap-class="el-select-dropdown__wrap"
  112.           view-class="el-select-dropdown__list"
  113.           :class="{ 'is-empty': !allowCreate && filteredOptionsCount === 0 }"
  114.           v-show="options.length > 0 && !loading">
  115.           <el-option
  116.             :value="query"
  117.             created
  118.             v-if="showNewOption">
  119.           </el-option>
  120.            <el-option
  121.                   v-if="noTag && multiple && allowCreate"
  122.                   v-for="item in mulOptions"
  123.                   :key="item.currentLabel"
  124.                   :optcreated="item.optcreated"
  125.                   :value="item.currentLabel">
  126.            </el-option>
  127.           <slot></slot>
  128.         </el-scrollbar>
  129.         <p class="el-select-dropdown__empty" v-if="emptyText && (allowCreate && options.length === 0 || !allowCreate)">{{ emptyText }}</p>
  130.       </el-select-menu>
  131.     </transition>
  132.   </div>
  133. </template>
  135. <script type="text/babel">
  136.   import Emitter from 'element-ui/src/mixins/emitter';
  137.   import Locale from 'element-ui/src/mixins/locale';
  138.   import ElInput from 'element-ui/packages/input';
  139.   import ElSelectMenu from './select-dropdown.vue';
  140.   import ElOption from './option.vue';
  141.   import ElTag from 'element-ui/packages/tag';
  142.   import ElScrollbar from 'element-ui/packages/scrollbar';
  143.   import debounce from 'throttle-debounce/debounce';
  144.   import Clickoutside from 'element-ui/src/utils/clickoutside';
  145.   import { addClass, removeClass, hasClass } from 'element-ui/src/utils/dom';
  146.   import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
  147.   import { t } from 'element-ui/src/locale';
  148.   import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
  149.   import { getValueByPath } from 'element-ui/src/utils/util';
  151.   const sizeMap = {
  152.     'large': 42,
  153.     'small': 30,
  154.     'mini': 22
  155.   };
  157.   export default {
  158.     mixins: [Emitter, Locale],
  160.     name: 'ElSelect',
  162.     componentName: 'ElSelect',
  164.     computed: {
  165.       iconClass() {
  166.         let criteria = this.clearable &&
  167.           !this.disabled &&
  168.           this.inputHovering &&
  169.           !this.multiple &&
  170.           this.value !== undefined &&
  171.           this.value !== '';
  172.         return criteria ? 'circle-close is-show-close' : (this.remote && this.filterable ? '' : 'caret-top');
  173.       },
  175.       debounce() {
  176.         return this.remote ? 300 : 0;
  177.       },
  179.       emptyText() {
  180.         if (this.loading) {
  181.           return this.loadingText || this.t('el.select.loading');
  182.         } else {
  183.           if (this.remote && this.query === '' && this.options.length === 0) return false;
  184.           if (this.filterable && this.options.length > 0 && this.filteredOptionsCount === 0) {
  185.             return this.noMatchText || this.t('el.select.noMatch');
  186.           }
  187.           if (this.options.length === 0) {
  188.             return this.noDataText || this.t('el.select.noData');
  189.           }
  190.         }
  191.         return null;
  192.       },
  194.       showNewOption() {
  195.         let hasExistingOption = this.options.filter(option => !option.created)
  196.           .some(option => option.currentLabel === this.query);
  197.         return this.filterable && this.allowCreate && this.query !== '' && !hasExistingOption;
  198.       }
  199.     },
  201.     components: {
  202.       ElInput,
  203.       ElSelectMenu,
  204.       ElOption,
  205.       ElTag,
  206.       ElScrollbar
  207.     },
  209.     directives: { Clickoutside },
  211.     props: {
  212.       name: String,
  213.       value: {
  214.         required: true
  215.       },
  216.       size: String,
  217.       disabled: Boolean,
  218.       clearable: Boolean,
  219.       filterable: Boolean,
  220.       searchable: Boolean,
  221.       allowCreate: Boolean,
  222.       noTag:Boolean,  //多选的时候是否以字符串形式展示 f
  223.       showpop: {  //是否在文字超出span标签的时候显示提示 f
  224.          type: Boolean,
  225.          default: true
  226.       },
  227.       loading: Boolean,
  228.       popperClass: String,
  229.       remote: Boolean,
  230.       loadingText: String,
  231.       noMatchText: String,
  232.       noDataText: String,
  233.       remoteMethod: Function,
  234.       filterMethod: Function,
  235.       multiple: Boolean,
  236.       multipleLimit: {
  237.         type: Number,
  238.         default: 0
  239.       },
  240.       placeholder: {
  241.         type: String,
  242.         default() {
  243.           return t('el.select.placeholder');
  244.         }
  245.       },
  246.       defaultFirstOption: Boolean,
  247.       valueKey: {
  248.         type: String,
  249.         default: 'value'
  250.       }
  251.     },
  253.     data() {
  254.       return {
  255.         options: [],
  256.         cachedOptions: [],
  257.         createdLabel: null,
  258.         createdSelected: false,
  259.         selected: this.multiple ? [] : {},
  260.         isSelect: true,
  261.         inputLength: 20,
  262.         inputWidth: 0,
  263.         cachedPlaceHolder: '',
  264.         optionsCount: 0,
  265.         filteredOptionsCount: 0,
  266.         visible: false,
  267.         selectedLabel: '',
  268.         hoverIndex: -1,
  269.         query: '',
  270.         search: '',
  271.         optionsAllDisabled: false,
  272.         inputHovering: false,
  273.         currentPlaceholder: '',
  274.         currentSelLabel:'', //多选时以字符串形式展示的标签 f
  275.         initPopperTop:0, //初始时下拉框的位置 f
  276.         mulOptions:[]   //多选时添加的数据 f
  277.       };
  278.     },
  280.     watch: {
  281.       placeholder(val) {
  282.         this.cachedPlaceHolder = this.currentPlaceholder = val;
  283.       },
  285.       value(val) {
  286.         if (this.multiple) {
  287.           this.resetInputHeight();
  288.           if (val.length > 0 || (this.$refs.input && this.query !== '')) {
  289.             this.currentPlaceholder = '';
  290.           } else {
  291.             this.currentPlaceholder = this.cachedPlaceHolder;
  292.           }
  293.         }
  294.         this.setSelected();
  295.         if (this.filterable && !this.multiple) {
  296.           this.inputLength = 20;
  297.         }
  298.         this.$emit('change', val);
  299.         this.dispatch('ElFormItem', 'el.form.change', val);
  300.       },
  302.       search(val) {
  303.         if (this.searchable) {
  304.           this.$emit('search-change', val);
  305.         }
  306.       },
  307.       query(val) {
  308.         this.$nextTick(() => {
  309.           if (this.visible) {
  310.               this.broadcast('ElSelectDropdown', 'updatePopper');
  311.               //multiple、noTag、filterable 同时存在时，调整下拉框位置
  312.               if(this.multiple && this.noTag && this.filterable){
  313.                   this.$nextTick(()=>{
  314.                       var popperTop = window.getComputedStyle? window.getComputedStyle(this.$refs.popper.$el).top : this.$refs.popper.$el.currentStyle.top;
  315.                       this.$refs.popper.$el.style.top = parseInt(popperTop)+ 25+'px';
  316.                   })
  317.               }
  318.           }
  319.         });
  320.         this.hoverIndex = -1;
  321.         if (this.multiple && this.filterable) {
  322.           this.inputLength = this.$refs.input.value.length * 15 + 20;
  323.           this.managePlaceholder();
  324.           this.resetInputHeight();
  325.         }
  326.         if (this.remote && typeof this.remoteMethod === 'function') {
  327.           this.hoverIndex = -1;
  328.           this.remoteMethod(val);
  329.           this.broadcast('ElOption', 'resetIndex');
  330.         } else if (typeof this.filterMethod === 'function') {
  331.           this.filterMethod(val);
  332.           this.broadcast('ElOptionGroup', 'queryChange');
  333.         } else {
  334.           this.filteredOptionsCount = this.optionsCount;
  335.           this.broadcast('ElOption', 'queryChange', val);
  336.           this.broadcast('ElOptionGroup', 'queryChange');
  337.         }
  338.         if (this.defaultFirstOption && (this.filterable || this.remote) && this.filteredOptionsCount) {
  339.           this.checkDefaultFirstOption();
  340.         }
  341.       },
  343.       visible(val) {
  344.         if (!val) {
  345.           this.$refs.reference.$el.querySelector('input').blur();
  346.           this.handleIconHide();
  347.           this.broadcast('ElSelectDropdown', 'destroyPopper');
  348.           if (this.$refs.input) {
  349.             this.$refs.input.blur();
  350.           }
  351.           this.query = '';
  352.           this.selectedLabel = '';
  353.           this.inputLength = 20;
  354.           this.resetHoverIndex();
  355.           this.$nextTick(() => {
  356.             if (this.$refs.input &&
  357.               this.$refs.input.value === '' &&
  358.               this.selected.length === 0) {
  359.               this.currentPlaceholder = this.cachedPlaceHolder;
  360.             }
  361.           });
  362.           if (!this.multiple) {
  363.             if (this.selected) {
  364.               if (this.filterable && this.allowCreate &&
  365.                 this.createdSelected && this.createdLabel) {
  366.                 this.selectedLabel = this.createdLabel;
  367.               } else {
  368.                 this.selectedLabel = this.selected.currentLabel;
  369.               }
  370.               if (this.filterable) this.query = this.selectedLabel;
  371.             }
  372.           }
  373.         } else {
  374.           this.handleIconShow();
  375.           this.broadcast('ElSelectDropdown', 'updatePopper');
  376.            //multiple、noTag、filterable 同时存在时，调整下拉框位置，并记录初始下拉框的位置
  377.           if(this.multiple && this.noTag && this.filterable){
  378.                 this.$nextTick(()=>{
  379.                     this.$refs.input.focus();
  380.                     var popperTop = window.getComputedStyle? window.getComputedStyle(this.$refs.popper.$el).top : this.$refs.popper.$el.currentStyle.top;
  381.                     //记录初始下拉框的位置
  382.                     this.initPopperTop = popperTop;
  383.                     this.$refs.popper.$el.style.top = parseInt(popperTop) + 25 +'px';
  384.                 })
  385.             }
  386.           if (this.filterable) {
  387.             this.query = this.selectedLabel;
  388.             if (this.multiple) {
  389.               this.$refs.input.focus();
  390.             } else {
  391.               if (!this.remote) {
  392.                 this.broadcast('ElOption', 'queryChange', '');
  393.                 this.broadcast('ElOptionGroup', 'queryChange');
  394.               }
  395.               this.broadcast('ElInput', 'inputSelect');
  396.             }
  397.           }
  398.         }
  399.         this.$emit('visible-change', val);
  400.       },
  402.       options(val) {
  403.         if (this.$isServer) return;
  404.         this.optionsAllDisabled = val.length === val.filter(item => item.disabled === true).length;
  405.         if (this.multiple) {
  406.           this.resetInputHeight();
  407.         }
  408.         let inputs = this.$el.querySelectorAll('input');
  409.         if ([].indexOf.call(inputs, document.activeElement) === -1) {
  410.           this.setSelected();
  411.         }
  412.         if (this.defaultFirstOption && (this.filterable || this.remote) && this.filteredOptionsCount) {
  413.           this.checkDefaultFirstOption();
  414.         }
  415.       }
  416.     },
  418.     methods: {
  419.         //当复选时文字超出输入框，出现提示框
  420.         showSpanTooltip: function (event) {
  421.             if(!this.showpop) return;
  422.             var ev = event || window.event;
  423.             var eventName = ev.target.className;
  424.             if (eventName.indexOf('noTagSpan') != -1) {
  425.                 if (ev.target.offsetWidth < ev.target.scrollWidth) {
  426.                     var tooltip = this.$refs.textTooltip;
  427.                     tooltip.referenceElm = ev.target;
  428.                     tooltip.$refs.popper.style.display = 'none';
  429.                     tooltip.doDestroy();
  430.                     tooltip.showPopper = true;
  431.                 }
  432.             }
  433.         },
  434.         //当复选时文字超出输入框，隐藏提示框
  435.         hiddenSpanTooltip: function () {
  436.             if(!this.showpop) return;
  437.             const tooltip = this.$refs.textTooltip;
  438.             if (tooltip) {
  439.                 tooltip.doClose() ;
  440.                 tooltip.doDestroy();
  441.             }
  442.         },
  443.       handleIconHide() {
  444.         let icon = this.$el.querySelector('.el-input__icon');
  445.         if (icon) {
  446.           removeClass(icon, 'is-reverse');
  447.         }
  448.       },
  450.       handleIconShow() {
  451.         let icon = this.$el.querySelector('.el-input__icon');
  452.         if (icon && !hasClass(icon, 'el-icon-circle-close')) {
  453.           addClass(icon, 'is-reverse');
  454.         }
  455.       },
  457.       scrollToOption(className = 'selected') {
  458.         const menu = this.$refs.popper.$el.querySelector('.el-select-dropdown__wrap');
  459.         scrollIntoView(menu, menu.getElementsByClassName(className)[0]);
  460.       },
  462.       handleMenuEnter() {
  463.         this.$nextTick(() => this.scrollToOption());
  464.       },
  466.       getOption(value) {
  467.         let option;
  468.         const type = typeof value;
  469.         const isObject = type !== 'string' && type !== 'number' && type !== 'boolean';
  470.         for (let i = this.cachedOptions.length - 1; i >= 0; i--) {
  471.           const cachedOption = this.cachedOptions[i];
  472.           const isEqual = isObject
  473.             ? this.getValueByPath(cachedOption.value, this.valueKey) === this.getValueByPath(value, this.valueKey)
  474.             : cachedOption.value === value;
  475.           if (isEqual) {
  476.             option = cachedOption;
  477.             break;
  478.           }
  479.         }
  480.         if (option) return option;
  481.         const label = !isObject
  482.           ? value : '';
  483.         let newOption = {
  484.           value: value,
  485.           currentLabel: label
  486.         };
  487.         if (this.multiple) {
  488.           newOption.hitState = false;
  489.         }
  490.         return newOption;
  491.       },
  492.       getValueByPath(object, prop) {
  493.         prop = prop || '';
  494.         const paths = prop.split('.');
  495.         let current = object;
  496.         let result = null;
  497.         for (let i = 0, j = paths.length; i < j; i++) {
  498.           const path = paths[i];
  499.           if (current !== 0 && !current) break;
  500.           if (i === j - 1) {
  501.             result = current[path];
  502.             break;
  503.           }
  504.           current = current[path];
  505.         }
  506.         return result;
  507.       },
  509.       setSelected() {
  510.         if (!this.multiple) {
  511.           let option = this.getOption(this.value);
  512.           if (option.created) {
  513.             this.createdLabel = option.currentLabel;
  514.             this.createdSelected = true;
  515.           } else {
  516.             this.createdSelected = false;
  517.           }
  518.           this.selectedLabel = option.currentLabel;
  519.           this.selected = option;
  520.           if (this.filterable) this.query = this.selectedLabel;
  521.           return;
  522.         }
  523.         let result = [];
  524.         if (Array.isArray(this.value)) {
  525.           this.value.forEach(value => {
  526.             result.push(this.getOption(value));
  527.           });
  528.         }
  529.         this.selected = result;
  530.          //复选时，选项以字符串的形式显示，此处处理显示数据，数组转成字符串
  531.          if(this.noTag && this.multiple){
  532.               var arr = [];
  533.               if(this.selected && this.selected.length){
  534.                   this.selected.forEach(function(item){
  535.                       arr.push(item.currentLabel);
  536.                   })
  537.               }
  538.               this.currentSelLabel = arr.join(',');
  539.          }
  540.         this.$nextTick(() => {
  541.           this.resetInputHeight();
  542.         });
  543.       },
  545.       handleFocus() {
  546.         this.visible = true;
  547.       },
  549.       handleIconClick(event) {
  550.         if (this.iconClass.indexOf('circle-close') > -1) {
  551.           this.deleteSelected(event);
  552.         } else {
  553.           this.toggleMenu();
  554.         }
  555.       },
  557.       handleMouseDown(event) {
  558.         if (event.target.tagName !== 'INPUT') return;
  559.         if (this.visible) {
  560.           this.handleClose();
  561.           event.preventDefault();
  562.         }
  563.       },
  565.       doDestroy() {
  566.         this.$refs.popper && this.$refs.popper.doDestroy();
  567.         this.dropdownUl = null;
  568.       },
  570.       handleClose() {
  571.         this.visible = false;
  572.       },
  574.       toggleLastOptionHitState(hit) {
  575.         if (!Array.isArray(this.selected)) return;
  576.         const option = this.selected[this.selected.length - 1];
  577.         if (!option) return;
  579.         if (hit === true || hit === false) {
  580.           option.hitState = hit;
  581.           return hit;
  582.         }
  584.         option.hitState = !option.hitState;
  585.         return option.hitState;
  586.       },
  588.       deletePrevTag(e) {
  589.         if (e.target.value.length <= 0 && !this.toggleLastOptionHitState()) {
  590.           const value = this.value.slice();
  591.           value.pop();
  592.           this.$emit('input', value);
  593.         }
  594.       },
  596.       managePlaceholder() {
  597.         if (this.currentPlaceholder !== '') {
  598.           this.currentPlaceholder = this.$refs.input.value ? '' : this.cachedPlaceHolder;
  599.         }
  600.       },
  602.       resetInputState(e) {
  603.         if (e.keyCode !== 8) this.toggleLastOptionHitState(false);
  604.         this.inputLength = this.$refs.input.value.length * 15 + 20;
  605.         this.resetInputHeight();
  606.       },
  608.       resetInputHeight() {
  609.         this.$nextTick(() => {
  610.           if (!this.$refs.reference) return;
  611.           let inputChildNodes = this.$refs.reference.$el.childNodes;
  612.           let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
  613.           input.style.height = Math.max(this.$refs.tags.clientHeight + 6, sizeMap[this.size] || 36) + 'px';
  614.           if (this.visible && this.emptyText !== false) {
  615.             this.broadcast('ElSelectDropdown', 'updatePopper');
  616.               //multiple、noTag、filterable 同时存在时，判断当前下拉框是否在初始位置，不在则调整下拉框位置
  617.               if(this.multiple && this.noTag && this.filterable){
  618.                   this.$nextTick(()=>{
  619.                       var popperTop = window.getComputedStyle? window.getComputedStyle(this.$refs.popper.$el).top : this.$refs.popper.$el.currentStyle.top;
  620.                       if(popperTop <= this.initPopperTop){
  621.                           this.$refs.popper.$el.style.top = parseInt(popperTop)+ 25+'px';
  622.                       }
  623.                   })
  624.               }
  625.           }
  626.         });
  627.       },
  629.       resetHoverIndex() {
  630.         setTimeout(() => {
  631.           if (!this.multiple) {
  632.             this.hoverIndex = this.options.indexOf(this.selected);
  633.           } else {
  634.             if (this.selected.length > 0) {
  635.               this.hoverIndex = Math.min.apply(null, this.selected.map(item => this.options.indexOf(item)));
  636.             } else {
  637.               this.hoverIndex = -1;
  638.             }
  639.           }
  640.         }, 300);
  641.       },
  643.       handleOptionSelect(option) {
  644.         if (this.multiple) {
  645.           const value = this.value.slice();
  646.           const optionIndex = this.getValueIndex(value, option.value);
  647.           if (optionIndex > -1) {
  648.               //multiple、allowCreate存在，复选时可以向下拉列表中删除数据
  649.               if(this.allowCreate && option.optcreated && this.noTag){
  650.                   if(this.mulOptions && this.mulOptions.length){
  651.                       this.mulOptions.forEach((item,index)=>{
  652.                           if(item.currentValue == option.currentValue){
  653.                               this.mulOptions.splice(index, 1);
  654.                           }
  655.                       })
  656.                   }
  657.               }
  658.             value.splice(optionIndex, 1);
  659.           } else if (this.multipleLimit <= 0 || value.length < this.multipleLimit) {
  660.             value.push(option.value);
  661.           }
  662.           this.$emit('input', value);
  663.           if (option.created) {
  664.              //multiple、allowCreate存在，复选时可以像下拉列表中添加数据
  665.              if(this.allowCreate && this.noTag && !option.optcreated){
  666.                   var obj = {
  667.                       optcreated:true,
  668.                       created:option.created,
  669.                       currentLabel:option.currentLabel,
  670.                       currentValue:option.currentValue
  671.                   }
  672.                   this.mulOptions.push(obj);
  673.              }
  674.             this.query = '';
  675.             this.inputLength = 20;
  676.           }
  677.           if (this.filterable) this.$refs.input.focus();
  678.         } else {
  679.           this.$emit('input', option.value);
  680.           this.visible = false;
  681.         }
  682.         this.$nextTick(() => this.scrollToOption());
  683.       },
  685.       getValueIndex(arr = [], value) {
  686.         const type = typeof value;
  687.         const isObject = type !== 'string' && type !== 'number' && type !== 'boolean';
  688.         if (!isObject) {
  689.           return arr.indexOf(value);
  690.         } else {
  691.           const valueKey = this.valueKey;
  692.           let index = -1;
  693.           arr.some((item, i) => {
  694.             if (getValueByPath(item, valueKey) === getValueByPath(value, valueKey)) {
  695.               index = i;
  696.               return true;
  697.             }
  698.             return false;
  699.           });
  700.           return index;
  701.         }
  702.       },
  704.       toggleMenu() {
  705.         if (this.filterable && this.query === '' && this.visible) {
  706.           return;
  707.         }
  708.         if (!this.disabled) {
  709.           this.visible = !this.visible;
  710.         }
  711.       },
  713.       navigateOptions(direction) {
  714.         if (!this.visible) {
  715.           this.visible = true;
  716.           return;
  717.         }
  718.         if (this.options.length === 0 || this.filteredOptionsCount === 0) return;
  719.         this.optionsAllDisabled = this.options.length === this.options.filter(item => item.disabled === true).length;
  720.         if (!this.optionsAllDisabled) {
  721.           if (direction === 'next') {
  722.             this.hoverIndex++;
  723.             if (this.hoverIndex === this.options.length) {
  724.               this.hoverIndex = 0;
  725.             }
  726.             if (this.options[this.hoverIndex].disabled === true ||
  727.               this.options[this.hoverIndex].groupDisabled === true ||
  728.               !this.options[this.hoverIndex].visible) {
  729.               this.navigateOptions('next');
  730.             }
  731.           }
  732.           if (direction === 'prev') {
  733.             this.hoverIndex--;
  734.             if (this.hoverIndex < 0) {
  735.               this.hoverIndex = this.options.length - 1;
  736.             }
  737.             if (this.options[this.hoverIndex].disabled === true ||
  738.               this.options[this.hoverIndex].groupDisabled === true ||
  739.               !this.options[this.hoverIndex].visible) {
  740.               this.navigateOptions('prev');
  741.             }
  742.           }
  743.         }
  744.         this.$nextTick(() => this.scrollToOption('hover'));
  745.       },
  747.       selectOption() {
  748.         if (this.options[this.hoverIndex]) {
  749.           this.handleOptionSelect(this.options[this.hoverIndex]);
  750.         }
  751.       },
  753.       deleteSelected(event) {
  754.         event.stopPropagation();
  755.         this.$emit('input', '');
  756.         this.visible = false;
  757.         this.$emit('clear');
  758.       },
  760.       deleteTag(event, tag) {
  761.         let index = this.selected.indexOf(tag);
  762.         if (index > -1 && !this.disabled) {
  763.           const value = this.value.slice();
  764.           value.splice(index, 1);
  765.           this.$emit('input', value);
  766.           this.$emit('remove-tag', tag);
  767.         }
  768.         event.stopPropagation();
  769.       },
  771.       onInputChange() {
  772.         if (this.filterable) {
  773.           this.query = this.selectedLabel;
  774.         }
  775.       },
  777.       onOptionDestroy(option) {
  778.         this.optionsCount--;
  779.         this.filteredOptionsCount--;
  780.         let index = this.options.indexOf(option);
  781.         if (index > -1) {
  782.           this.options.splice(index, 1);
  783.         }
  784.         this.broadcast('ElOption', 'resetIndex');
  785.       },
  787.       resetInputWidth() {
  788.         this.inputWidth = this.$refs.reference.$el.getBoundingClientRect().width;
  789.       },
  791.       handleResize() {
  792.         this.resetInputWidth();
  793.         if (this.multiple) this.resetInputHeight();
  794.       },
  796.       checkDefaultFirstOption() {
  797.         this.hoverIndex = -1;
  798.         for (let i = 0; i !== this.options.length; ++i) {
  799.           const option = this.options[i];
  800.           if (this.query) {
  801.             // pick first options that passes the filter
  802.             if (!option.disabled && !option.groupDisabled && option.visible) {
  803.               this.hoverIndex = i;
  804.               break;
  805.             }
  806.           } else {
  807.             // pick currently selected option
  808.             if (option.itemSelected) {
  809.               this.hoverIndex = i;
  810.               break;
  811.             }
  812.           }
  813.         }
  814.       },
  816.       getValueKey(item) {
  817.         const type = typeof item.value;
  818.         if (type === 'number' || type === 'string') {
  819.           return item.value;
  820.         } else {
  821.           return getValueByPath(item.value, this.valueKey);
  822.         }
  823.       }
  824.     },
  826.     created() {
  827.       this.cachedPlaceHolder = this.currentPlaceholder = this.placeholder;
  828.       if (this.multiple && !Array.isArray(this.value)) {
  829.         this.$emit('input', []);
  830.       }
  831.       if (!this.multiple && Array.isArray(this.value)) {
  832.         this.$emit('input', '');
  833.       }
  834.       this.setSelected();
  836.       this.debouncedOnInputChange = debounce(this.debounce, () => {
  837.         this.onInputChange();
  838.       });
  840.       this.$on('handleOptionClick', this.handleOptionSelect);
  841.       this.$on('onOptionDestroy', this.onOptionDestroy);
  842.       this.$on('setSelected', this.setSelected);
  843.     },
  845.     mounted() {
  846.       if (this.multiple && Array.isArray(this.value) && this.value.length > 0) {
  847.         this.currentPlaceholder = '';
  848.       }
  849.       addResizeListener(this.$el, this.handleResize);
  850.       if (this.remote && this.multiple) {
  851.         this.resetInputHeight();
  852.       }
  853.       this.$nextTick(() => {
  854.         if (this.$refs.reference && this.$refs.reference.$el) {
  855.           this.inputWidth = this.$refs.reference.$el.getBoundingClientRect().width;
  856.         }
  857.       });
  858.     },
  860.     beforeDestroy() {
  861.       if (this.$el && this.handleResize) removeResizeListener(this.$el, this.handleResize);
  862.     }
  863.   };
  864.   // dialog_ref
  866. </script>

element-ui select组件中复选时以字符串形式显示的更多相关文章

  1. 使用 Element UI Select 组件的 value-key 属性，让绑定值可以为一个对象

    EsunR 2019-11-07 12:14:42  12264  收藏 6 分类专栏: Vue 文章标签: element-ui 版权 当我们使用 Elemet UI 的选择组件进行多选时,Sele ...

  2. element ui step组件在另一侧加时间轴显示

    这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...

  3. element ui select组件和table做分页完整功能和二级联动效果

    <template> <div class="index_box"> <div class="search_box"> &l ...

  4. [转]vue Element UI走马灯组件重写

    https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...

  5. Element UI表格组件技巧：如何简洁实现跨页勾选、跨页统计功能

    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

  6. 封装一个优雅的element ui表格组件

    现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...

  7. Element UI table组件源码分析

    本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...

  8. 普通element ui table组件的使用

    1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...

  9. Element UI 中组件this.$message报错

    最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...

随机推荐

  1. Centos系统安装InfluxDB

    概述安装influxDB时需要root用户或者管理员权限. 端口默认情况下,InfluxDB会使用如下的端口: * TCP8086端口是服务器监听端口,对HTTP API响应 * TCP8088端口是 ...

  2. Android框架式编程之MVP架构

    MVP(Model-View-Presenter)模式.是将APP的结构分为三层:View - Presenter - Model. View 1. 提供UI交互 2. 在presenter的控制下修 ...

  3. 如何在cygwin中运行crontab定时脚本[利刃篇]

    用到cygwin,自然是希望能多处理一些类似linux的任务了,那就自然少不了定时任务crontab,看到网上教程不少,自己运行一个测试却也不那么容易,下面就记录我的安装过程,以供参考吧! 1.首先, ...

  4. maven 下载镜像文件卡，下载pom文件慢的问题

    问题原因: maven默认的镜像库URL为 http://maven.net.cn/content/groups/public/ 由于网络原因,可能导致响应速度超级慢,或者无法效应: 解决方法: 配置 ...

  5. spring boot log4j2配置

    [传送门]:log4j官网配置文件详解 1. 排除 spring boot 自带的  spring-boot-starter-logging 依赖 <dependency> <gro ...

  6. MessageBeep - Play a System sound

    There is a interesting function which can play a System sound. First let's see the WinAPI. //声明: Mes ...

  7. 凉凉了，Eureka 宣布闭源，Spring Cloud 何去何从？

    今年 Dubbo 活了,并且被 Apache 收了.同时很不幸,Spring Cloud 下的 Netflix Eureka 组件项目居然宣布闭源了.. 已经从 Dubbo 迁移至 Spring Cl ...

  8. js中break、continue和return的一般用法总结

    break break :终止break的整个循环体,包括内部所有循环.但对循环体外部的循环不影响. for(let i = 0;i<2;i++){ for(let j = 0;j<2;j ...

  9. hdu 6086 -- Rikka with String(AC自动机 + 状压DP)

    题目链接 Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, s ...

  10. 从 Secure Element 到 Android KeyStore

    忽如一夜春风来,智能手机来到每个人的手上,我们用它支付.理财.娱乐.工作.记录生活.存储私密信息.乘坐公共交通.开启家门.控制汽车....智能手机是如此的重要,不知天天把它拿在手上的你,是否关心过它是 ...