Vue: @close="deleteTag($event, item)" JSX: on-close={e => this.deleteTag(e, this.selected[0])} deleteTag(event, tag, tagIndex){ const value = this.value.slice(); value.splice(tagIndex, 1);// 核心代码，其他代码省略 }
写法一、Vue template(推荐)
非常简单，改动特别少，可以使用Vue的所有用法，只需要复制el-select的template
新建一个vue文件
复制el-select的template模板内容过来
导入el-select,继承
覆盖methods中的deleteTag
结果
<template> <div :class="[selectSize ? 'el-select--' + selectSize : '']" @click.stop="toggleMenu" v-clickoutside="handleClose"> 我是示例代码，此处为自定义模板内容 </div> </template> <script> import { Select} from 'element-ui'; export default { extends: Select,//继承 name: 'my-el-select', methods: { deleteTag(event, tag, tagIndex) { // 重写该方法 }, }, }; </script>
写法二、JSX(比较麻烦)
需要手动将Vue template转为jsx写法，无法使用事件修饰符，部分指令等等，改动比较大
1、导入继承
import {Select} from 'element-ui'; const myElSelect = { extends: Select }
2、 重写render
Vue template最终编译之后也是生成render函数，这里覆盖render函数，
生成自定义内容。此处的意义只是为了记录以便于方便我用render函数时的jsx写法
render() { const tagContent = () => { if (this.collapseTags && this.selected.length) { const tag0 = ( <el-tag closable={!this.selectDisabled} size={this.collapseTagSize} hit={this.selected[0].hitState} type='info' on-close={e => this.deleteTag(e, this.selected[0])} disable-transitions={true}> <span>{this.selected[0].currentLabel}</span> </el-tag> ); const tag1 = ( <el-tag closable={false} size={this.collapseTagSize} type='info' disable-transitions={true}> <span>+ {this.selected.length - 1}</span> </el-tag> ); if (this.selected.length > 1) { return ( <span> {tag0} {tag1} </span> ); } return ( <span> {tag0} </span> ); } }; const emptyText = () => { if (this.emptyText && (!this.allowCreate || this.loading || (this.allowCreate && this.options.length === 0))) { return ( <p>{this.emptyText}</p> ); } }; const selectOption = () => { return ( <transition on-before-enter={this.handleMenuEnter} on-after-leave={this.doDestroy}> <el-select-menu ref='popper' append-to-body={this.popperAppendToBody} v-show={this.visible && this.emptyText !== false}> <el-scrollbar tag='ul' wrap-class='el-select-dropdown__wrap' view-class='el-select-dropdown__list' ref='scrollbar' class={{'is-empty': !this.allowCreate && this.query && this.filteredOptionsCount === 0}} v-show={this.options.length > 0 && !this.loading}> {this.showNewOption ? ( <el-option value={this.query} created={true}> </el-option> ) : null} { this.$slots.default } </el-scrollbar> {emptyText()} </el-select-menu> </transition> ); }; return ( <div class={['el-select', this.selectSize ? 'el-select--' + this.selectSize : '']} on-click={this.toggleMenu} v-clickoutside={this.handleClose}> <div ref='tags' style={{'max-width': this.inputWidth - 32 + 'px'}}> {tagContent()} <transition-group onAfterLeave={this.resetInputHeight}> {this.selected.map((item, index) => { return ( <el-tag key={index} closable={!this.selectDisabled} size={this.collapseTagSize} hit={item.hitState} type='info' on-close={(e) => this.deleteTag(e, item, index)} disable-transitions={false}> <span>{item.currentLabel}</span> </el-tag> ); })} </transition-group> </div> <el-input ref='reference' value={this.selectedLabel} type='text' placeholder={this.currentPlaceholder} name={this.name} id={this.id} auto-complete={this.autoComplete} size={this.selectSize} disabled={this.selectDisabled} readonly={this.readonly} validate-event={false} class={{'is-focus': this.visible}} on-focus={this.handleFocus} on-blur={this.handleBlur} on-keyup_native={this.debouncedOnInputChange} on-paste_native={this.debouncedOnInputChange} on-mouseenter_native={(this.inputHovering = true)} on-mouseleave_native={(this.inputHovering = false)} > <i slot='suffix' class={['el-select__caret', 'el-input__icon', 'el-icon-' + this.iconClass]} on-click={() => this.handleIconClick}/> </el-input> {selectOption()} </div> ); }
3、 重写method里的deleteTag方法
4、结果
import {Select} from 'element-ui'; const myElSelect = { extends: Select, methods: { deleteTag(event, tag, tagIndex) { // *****略 }, }, render() { return ( <div>例子</div> ); } }; export default myElSelect;
以上这篇vue 扩展现有组件的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: