fix: el-select 多选模式下默认值中含有不可编辑的选项,tag标签还是可以清除

pull/21848/head
landuoduo 2022-05-07 12:04:11 +08:00
parent 2f4f6962c6
commit feaf504421
4 changed files with 41 additions and 7 deletions

View File

@ -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'],
};
}
};

View File

@ -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();

View File

@ -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{

View File

@ -12,10 +12,15 @@
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 {