参考网址:【记录】el-select 已选项禁止删除 el-select编辑时已选择的项不允许删除 、element-ui里面的下拉多选框 el-select 时,默认值不可删除
在项目中 el-select 设置默认值且默认值不允许删除和取消选中
通过vue全局指令实现该要求
export default { update(el, bindings) { const [defaultValues, selectValue] = bindings.value // 需要隐藏的标签索引 const indexs = [] selectValue.map((item, index) => { defaultValues.map(defaultItem => { if (item == defaultItem) { indexs.push(index) } }) }) const dealStyle = function(tags) { tags.forEach((el, index) => { if ( indexs.includes(index) && ![...el.classList].includes('select-tag-close-none') ) { el.style.display = 'none' // close 图标隐藏掉 } }) } // 设置样式隐藏close icon let tags = el.querySelectorAll('.el-tag__close') if (tags.length === 0) { // 初始化tags为空处理 setTimeout(() => { let tagTemp = el.querySelectorAll('.el-tag__close') dealStyle(tagTemp) }) } else { setTimeout(() => { dealStyle(tags) }) } } }
指令文件夹下新建index.js文件
import defaultSelect from './select/defaultSelect' const install = function(Vue) { // Vue.directive('xxx', xxx) // 其他指令 Vue.directive('defaultSelect', defaultSelect) } if (window.Vue) { Vue.use(install) } export default install
在main.js 导入指令
import directive from './directive' Vue.use(directive)
在页面中使用指令
// 设置已选择的不可删除 selectIdList:选中值数组[1,2,3] form.selectId选中值id字符串,逗号分割 1,2,3 v-default-select="[selectIdList,form.selectId]" // 设置已选择的不可操作 :disabled=“selectIdList.includes(dict.value)”
<el-select ref="efficacyIdSelect" v-model="form.selectId" v-default-select="[selectIdList,form.selectId]" multiple filterable placeholder="请选择" class="select-width" @keydown.native.delete.capture.stop.prevent @change="$forceUpdate()"> <el-option v-for="dict in dict.List" :key="dict.value" :label="dict.label" :value="dict.value" :disabled="selectIdList.includes(dict.value)" /> </el-select> data(){ return { form:{}, selectIdList:[] } }标签:el,Vue,tags,elementui,close,默认值,select From: https://www.cnblogs.com/Intellectualscholar/p/17661604.html