刚开始,给el-option增加样式类,影响不了输入框里已选中的样式,后来查找之后发现了两位大佬的文章。
原文路径:
element-ui el-select多选默认值不允许编辑删除
element-ui里面的下拉多选框 el-select 时,默认值不可删除_elementui的下拉多选删不掉-CSDN博客
效果图:
代码部分:
index.vue
<el-select v-model="ruleForm.namespace" v-defaultSelect="[ruleForm.namespace,namespaceListNew,'id','isDefault',true]" multiple filterable @query-search="handleSearchSchemes" @change="handleSelectChange">
<el-option v-for="item in namespaceListNew" :key="item.id" :value="item.id" :label="item.name" :class="item.isDefault == true?'disableDelete':''"></el-option>
</el-select>
main.js (来自原文章)
// main.js
Vue.directive('defaultSelect', {
componentUpdated (el, bindings, vnode) {
// values v-model 绑定值
// options 下拉选项
// prop 对应 options 中 的 value 属性
// defaultProp 默认值判断属性
// defaultValue 默认值判断值
const [values, options, prop, defaultProp, defaultValue] = bindings.value
// 需要隐藏的标签索引
const indexs = []
const tempData = values.map(a => options.find(op => op[prop] === a))
tempData.forEach((a, index) => {
if (a[defaultProp] === defaultValue) indexs.push(index)
})
const dealStyle = function (tags) {
tags.forEach((el, index) => {
if (indexs.includes(index) && ![...el.classList].includes('select-tag-close-none')) {
el.classList.add('none')
}
})
}
// 设置样式 隐藏close icon
const tags = el.querySelectorAll('.el-tag__close')
if (tags.length === 0) {
// 初始化tags为空处理
setTimeout(() => {
const tagTemp = el.querySelectorAll('.el-tag__close')
dealStyle(tagTemp)
})
} else {
dealStyle(tags)
}
}
})
样式
.none{
display:none !important;
}