技术标签: Vue拓展组件功能 vue Vue Vue extend
用到ElementUI的select组件,要求能够多选并且重复选择。如果直接使用的话,首先el-tag
会报错,因为循环中key值重复;其次,他的移除是通过indexof搜索移除的tag的值,且在remove-tag事件中未抛出被移除tag的索引,这样的后果是存在多个相同值的tag时,只会移除第一个相同值的tag
在el-tag
的循环中,给close
事件增加一个参数index
,然后重写deleteTag
方法,直接通过index删除该tag
@close="deleteTag($event, item)"
on-close={e => this.deleteTag(e, this.selected[0])}
deleteTag(event, tag, tagIndex){
const value = this.value.slice();
value.splice(tagIndex, 1);// 核心代码,其他代码省略
}
非常简单,改动特别少,可以使用Vue的所有用法,只需要复制el-select的template
el-select
的template模板内容过来el-select
,继承methods
中的deleteTag
<template>
<div
class="el-select"
: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>
需要手动将Vue template转为jsx写法,无法使用事件修饰符,部分指令等等,改动比较大
import {
Select} from 'element-ui';
const myElSelect = {
extends: Select
}
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 class='el-select__tags-text'>{
this.selected[0].currentLabel}</span>
</el-tag>
);
const tag1 = (
<el-tag
closable={
false}
size={
this.collapseTagSize}
type='info'
disable-transitions={
true}>
<span class='el-select__tags-text'>+ {
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 class='el-select-dropdown__empty'>{
this.emptyText}</p>
);
}
};
const selectOption = () => {
return (
<transition
name='el-zoom-in-top'
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
class='el-select__tags'
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 class='el-select__tags-text'>{
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>
);
}
import {
Select} from 'element-ui';
const myElSelect = {
extends: Select,
methods: {
deleteTag(event, tag, tagIndex) {
// *****略
},
},
render() {
return (
<div>例子</div>
);
}
};
export default myElSelect;
文章浏览阅读122次。还是A+BTime Limit: 2000/1000 MS (Java/Others)Memory Limit: 65536/32768 K (Java/Others)Total Submission(s): 24568Accepted Submission(s): 11729Problem Description读入两个小于10000的正整数A和B,计算A+B。...
文章浏览阅读419次。HEADERS:在BASIC的基础上,额外记录了请求和响应的头信息。FULL:记录所有请求和响应的明细,包括头信息、请求体、元数据。BASIC:仅记录请求的方法,URL以及响应状态码和执行时间。NONE:不记录任何日志信息,这是默认值。配置Feign日志有两种方式;方式二:java代码实现。注解中声明则代表某服务。方式一:配置文件方式。_feign 日志设置
文章浏览阅读155次。将容器管理的持久性 Bean 用于面向服务的体系结构本文将介绍如何使用 IBM WebSphere Process Server 对容器管理的持久性 (CMP) Bean的连接和持久性逻辑加以控制,使其可以存储在非关系数据库..._javax.ejb.objectnotfoundexception: no such entity!
文章浏览阅读1.5k次。基础java练习题一、递归实现跳台阶从第一级跳到第n级,有多少种跳法一次可跳一级,也可跳两级。还能跳三级import java.math.BigDecimal;import java.util.Scanner;public class Main{ public static void main(String[]args){ Scanner reader=new Scanner(System.in); while(reader.hasNext()){ _java 递归例题
文章浏览阅读1.5k次,点赞6次,收藏6次。目录1.串应用- 计算一个串的最长的真前后缀题目描述输入输出样例输入样例输出题解2.字符串替换(string)题目描述输入输出样例输入样例输出题解3.可重叠子串 (Ver. I)题目描述输入输出样例输入样例输出题解4.字符串操作(string)题目描述输入输出样例输入样例输出题解1.串应用- 计算一个串的最长的真前后缀题目描述给定一个串,如ABCDAB,则ABCDAB的真前缀有:{ A, AB,ABC, ABCD, ABCDA }ABCDAB的真后缀有:{ B, AB,DAB, CDAB, BCDAB_对存储在string数组内的所有以字符‘a’开始并以字符‘e’结尾的单词做加密处理。
文章浏览阅读68次。西安交通大学/算法设计与问题求解/树与二叉树/MOOC_算法设计与问题求解西安交通大学
文章浏览阅读1.6k次。问题:在Vue项目中出现如下错误提示:[Vue warn]: Computed property "totalPrice" was assigned to but it has no setter. (found in <Anonymous>)代码:<input v-model="totalPrice"/>原因:v-model命令,因Vue 的双向数据绑定原理 , 会自动操作 totalPrice, 对其进行set 操作而 totalPrice 作为计..._computed property "totalprice" was assigned to but it has no setter.
文章浏览阅读60次。十分暴力而简洁的解决方式:读取P和T的位置并自动生成唯一正确答案,将题给测点与之对比,不一样就给我爬!_basic 1003 case 1
文章浏览阅读422次。原标题:详解将Web项目War包部署到Tomcat服务器基本步骤详解将Web项目War包部署到Tomcat服务器基本步骤1 War包War包一般是在进行Web开发时,通常是一个网站Project下的所有源码的集合,里面包含前台HTML/CSS/JS的代码,也包含Java的代码。当开发人员在自己的开发机器上调试所有代码并通过后,为了交给测试人员测试和未来进行产品发布,都需要将开发人员的源码打包成Wa..._/opt/bosssoft/war/medical-web.war/web-inf/web.xml of module medical-web.war.
文章浏览阅读3k次,点赞3次,收藏13次。# -*- coding: utf-8 -*-# 简述:这里有四个数字,分别是:1、2、3、4#提问:能组成多少个互不相同且无重复数字的三位数?各是多少?def f(n):list=[]count=0for i in range(1,n+1):for j in range(1, n+1):for k in range(1, n+1):if i!=j and j!=k and i!=k:list.a..._python求从0到9任意组合成三位数数字不能重复并输出
文章浏览阅读1k次,点赞3次,收藏2次。<el-table-column prop="studentSex" label="性别" :formatter="sex"></el-table-column>然后就在vue的methods中写方法就OK了methods: { sex(row,index){ if(row.studentSex == 1){ return '男'; }else{ return '女'; }..._elementui table 性别
文章浏览阅读1.1k次。java文件操作之移动文件到指定的目录_java中怎么将pro.txt移动到design_mode_code根目录下