el-select多选不要删除图标

el-select组件是Element UI库中的下拉选择框，它支持单选或多选模式。如果你想在多选模式下隐藏删除图标，可以在`el-select`组件的选项中设置每个选项的对象，然后在该对象上添加一个自定义的属性，比如`removeIcon: false`，这样就不会显示默认的删除图标。

示例代码如下：

<el-select multiple placeholder="请选择" v-model="selectedValues">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
    :remove-icon="false"> <!-- 隐藏删除图标 -->
  </el-option>
</el-select>

<script>
data() {
  return {
    selectedValues: [],
    options: [
      { value: 'option1', label: '选项一', removeIcon: false },
      { value: 'option2', label: '选项二', removeIcon: false },
      // ...
    ]
  };
}
</script>

相关问题

将所有el-select多选所有删除icon隐藏

如果你想在Vue.js中实现当`el-select`元素发生多选操作时，自动隐藏所有非默认选项的删除图标（`.el-tag__close`），你可以创建一个计算属性来跟踪已选项目的数量，并在`watch`或者`updated`生命周期钩子里进行判断。下面是简单的实现步骤：

1. 在模板上绑定`v-model`，这是`el-select`的基础数据绑定：

   <el-select v-model="selectedItems" @input="updateSelection">
     <!-- ... -->
   </el-select>

2. 定义一个计算属性来跟踪选中的项目：

   computed: {
     selectedLength () {
       return this.selectedItems.length;
     },
   },

3. 使用`watch`或`updated`钩子，在选中值变化时更新删除图标的可见性：

   watch: {
     selectedItems(newItems) {
       this.$nextTick(() => {
         const tags = document.querySelectorAll('.el-tag__close'); // 获取所有删除图标
         for (let i = 0; i < tags.length; i++) {
           const tag = tags[i];
           if (i >= newItems.length) {
             tag.style.display = 'none';
           } else {
             tag.style.display = '';
           }
         }
       });
     },
   },

4. 更新`el-select`的`@input`事件处理函数，触发数据变更：

   methods: {
     updateSelection() {
       // ...这里处理el-select的输入事件，比如同步数据到服务器等
       this.selectedItems = [...this.originalItems]; // 或者使用其他方法更新原始选中项
     },
   },

5. 初始状态下，设置默认选中的项目，这样在第一次渲染时不会隐藏所有的删除图标：

   data() {
     return {
       originalItems: [], // 初始化默认选中的项目
       selectedItems: [], // 存储当前用户选择的项目
       // ...其他数据
     };
   },
   created() {
     // 根据需求填充originalItems
   },

现在当你在`el-select`中进行多选时，除了选中的项目，其他的删除图标都会隐藏起来。

el-select多选禁止

### Element UI `el-select` 组件中实现多选禁用的方法

对于希望在Element UI的`el-select`组件中实现多选选项禁用的情况，可以通过设置特定项为不可选择以及移除已选标签中的关闭图标来达成目的。

当涉及到具体的操作时，可以利用`disabled`属性直接作用于单个选项之上，以此达到阻止某些项目被选取的效果[^2]。此方式允许开发者基于业务逻辑动态决定哪些条目应该处于可用或禁用状态。

为了防止用户从界面上删除已经选定的内容，可采用CSS样式隐藏默认显示用于清除单项选择标记的小叉号。这通常涉及向对应的DOM节点添加自定义类名（例如`.none`），并通过覆盖原有样式的手段将其视觉呈现调整为不展示的状态[^3]：

.none {
    display: none !important;
}

此外，如果需要进一步控制整个`el-select`控件的行为，比如完全锁定其交互能力，则可以在父级元素层面应用全局性的`disabled`特性，从而一次性使能/禁用所有内部子部件的功能。

下面是一个简单的例子展示了如何组合运用上述技术点，在Vue模板内配置一个带有部分受限项目的多选列表，并配合外部样式表确保界面行为的一致性和预期效果：

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