mirror of https://github.com/ElemeFE/element
fix: el-select 多选模式下默认值中含有不可编辑的选项,tag标签还是可以清除
parent
2f4f6962c6
commit
feaf504421
|
@ -1,6 +1,14 @@
|
|||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
@ -8,7 +16,24 @@
|
|||
export default {
|
||||
data() {
|
||||
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
|
||||
v-for="item in selected"
|
||||
:key="getValueKey(item)"
|
||||
:closable="!selectDisabled"
|
||||
:closable="!selectDisabled && !item.disabled"
|
||||
:size="collapseTagSize"
|
||||
:hit="item.hitState"
|
||||
type="info"
|
||||
@close="deleteTag($event, item)"
|
||||
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>
|
||||
</transition-group>
|
||||
|
||||
|
@ -771,6 +771,7 @@
|
|||
},
|
||||
|
||||
deleteTag(event, tag) {
|
||||
console.log(tag)
|
||||
let index = this.selected.indexOf(tag);
|
||||
if (index > -1 && !this.selectDisabled) {
|
||||
const value = this.value.slice();
|
||||
|
|
|
@ -35,6 +35,9 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
}
|
||||
& .el-select-dropdown__item.selected.is-disabled {
|
||||
color: #C0C4CC;
|
||||
}
|
||||
}
|
||||
|
||||
.el-scrollbar.is-empty .el-select-dropdown__list{
|
||||
|
|
|
@ -12,11 +12,16 @@
|
|||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
.el-select__tags
|
||||
>span {
|
||||
.el-select__tags {
|
||||
&>span {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.is-disabled{
|
||||
color: #C0C4CC;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.el-input__inner {
|
||||
border-color: $--select-border-color-hover;
|
||||
|
|
Loading…
Reference in New Issue