el-select多选禁止

### Element UI `el-select` 组件中实现多选禁用的方法 对于希望在Element UI的`el-select`组件中实现多选选项禁用的情况，可以通过设置特定项为不可选择以及移除已选标签中的关闭图标来达成目的。 当涉及到具体的操作时，可以利用`disabled`属性直接作用于单个选项之上，以此达到阻止某些项目被选取的效果[^2]。此方式允许开发者基于业务逻辑动态决定哪些条目应该处于可用或禁用状态。 为了防止用户从界面上删除已经选定的内容，可采用CSS样式隐藏默认显示用于清除单项选择标记的小叉号。这通常涉及向对应的DOM节点添加自定义类名（例如`.none`），并通过覆盖原有样式的手段将其视觉呈现调整为不展示的状态[^3]： ```css .none { display: none !important; } ``` 此外，如果需要进一步控制整个`el-select`控件的行为，比如完全锁定其交互能力，则可以在父级元素层面应用全局性的`disabled`特性，从而一次性使能/禁用所有内部子部件的功能。 下面是一个简单的例子展示了如何组合运用上述技术点，在Vue模板内配置一个带有部分受限项目的多选列表，并配合外部样式表确保界面行为的一致性和预期效果： ```html <template> <div id="app"> <!-- 使用v-model绑定到selectedOptions数组 --> <el-select v-model="selectedOptions" multiple placeholder="请选择"> <!-- 遍历options数组并渲染每一个option --> <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" :disabled="item.disabled"> <!-- 设置disabled属性 --> </el-option> </el-select> </div> </template> <script> export default { data() { return { selectedOptions: [], // 已经选择的值集合 options: [ { value: 'op1', label: 'Option 1' }, { value: 'op2', label: 'Option 2', disabled: true }, // 此处设定某一项为禁用 { value: 'op3', label: 'Option 3' } ] }; } }; </script> <style scoped> /* 添加额外的选择器以处理特殊情况下close按钮 */ .el-tag__close{ visibility:hidden!important;/* 或者使用其他方法如display:none*/ } /* 如果有更多定制需求也可以在此基础上继续扩展 */ </style> ```