mirror of https://github.com/ElemeFE/element
fix: el-select 多选模式下默认值中含有不可编辑的选项,tag标签还是可以清除
parent
2f4f6962c6
commit
feaf504421
|
@ -1,6 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="margin: 20px;">
|
<div style="margin: 20px;">
|
||||||
<el-input v-model="input" placeholder="请输入内容"></el-input>
|
<el-select v-model="value1" multiple placeholder="请选择">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
:disabled="item.disabled">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -8,7 +16,24 @@
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
input: 'Hello Element UI!'
|
options: [{
|
||||||
|
value: '选项1',
|
||||||
|
label: '黄金糕'
|
||||||
|
}, {
|
||||||
|
value: '选项2',
|
||||||
|
label: '双皮奶',
|
||||||
|
disabled: true
|
||||||
|
}, {
|
||||||
|
value: '选项3',
|
||||||
|
label: '蚵仔煎'
|
||||||
|
}, {
|
||||||
|
value: '选项4',
|
||||||
|
label: '龙须面'
|
||||||
|
}, {
|
||||||
|
value: '选项5',
|
||||||
|
label: '北京烤鸭'
|
||||||
|
}],
|
||||||
|
value1: ['选项2'],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -32,13 +32,13 @@
|
||||||
<el-tag
|
<el-tag
|
||||||
v-for="item in selected"
|
v-for="item in selected"
|
||||||
:key="getValueKey(item)"
|
:key="getValueKey(item)"
|
||||||
:closable="!selectDisabled"
|
:closable="!selectDisabled && !item.disabled"
|
||||||
:size="collapseTagSize"
|
:size="collapseTagSize"
|
||||||
:hit="item.hitState"
|
:hit="item.hitState"
|
||||||
type="info"
|
type="info"
|
||||||
@close="deleteTag($event, item)"
|
@close="deleteTag($event, item)"
|
||||||
disable-transitions>
|
disable-transitions>
|
||||||
<span class="el-select__tags-text">{{ item.currentLabel }}</span>
|
<span class="el-select__tags-text" :class="{ 'is-disabled': item.disabled }">{{ item.currentLabel }}</span>
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
|
|
||||||
|
@ -771,6 +771,7 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
deleteTag(event, tag) {
|
deleteTag(event, tag) {
|
||||||
|
console.log(tag)
|
||||||
let index = this.selected.indexOf(tag);
|
let index = this.selected.indexOf(tag);
|
||||||
if (index > -1 && !this.selectDisabled) {
|
if (index > -1 && !this.selectDisabled) {
|
||||||
const value = this.value.slice();
|
const value = this.value.slice();
|
||||||
|
|
|
@ -35,6 +35,9 @@
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
& .el-select-dropdown__item.selected.is-disabled {
|
||||||
|
color: #C0C4CC;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-scrollbar.is-empty .el-select-dropdown__list{
|
.el-scrollbar.is-empty .el-select-dropdown__list{
|
||||||
|
|
|
@ -12,10 +12,15 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.el-select__tags
|
.el-select__tags {
|
||||||
>span {
|
&>span {
|
||||||
display: contents;
|
display: contents;
|
||||||
}
|
}
|
||||||
|
.is-disabled{
|
||||||
|
color: #C0C4CC;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.el-input__inner {
|
.el-input__inner {
|
||||||
|
|
Loading…
Reference in New Issue