Vue自定义指令——el-select多选框设置默认值并且不可编辑

本文链接：https://blog.youkuaiyun.com/sugerinaflat/article/details/125339457

该博客介绍了一种使用Vue.js自定义指令的方式来实现el-select多选框的默认值不可删除功能。通过隐藏默认值的关闭图标，确保默认选项在用户交互中无法被移除。示例代码展示了如何定义Vue指令以及在模板中应用，以绑定默认值并禁用相应的删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-select多选框设置默认值并且不可删除

因为el-select原生就可以实现下拉列表的选项禁用，指定项不可添加。那么想要实现设置默认值并且不可编辑，只要实现默认值不可删除即可。

关闭按钮有着它自己的className：el-tag__close。

那么只要将默认值的el-tag__close图标全部隐藏掉，就能实现设置默认值不可删除效果。

具体指令如下：

import Vue from 'vue';
 
Vue.directive('defaultSelect', {
  bind(el, bindings) {
    const [defaultValues] = bindings.value //获取设置的不可编辑默认值
    // 将默认值的close图标隐藏掉
    const dealStyle = (tags) => {
      //循环将默认值数量的 close 图标隐藏
      tags.forEach((el, index) => {
        if (
          index <= defaultValues.length - 1 &&
          ![...el.classList].includes('select-tag-close-none')
        ) {
          el.style.display = 'none' // close 图标隐藏掉
        }
      })
    }
    // 隐藏 el-tag__close
    const tags = el.querySelectorAll('.el-tag__close')
    if (tags.length === 0) {
      setTimeout(() => {
        const tagTemp = el.querySelectorAll('.el-tag__close')
        dealStyle(tagTemp)
      })
    } else {
      dealStyle(tags)
    }
  }
})

在el-select中的应用：

<el-select
  v-defaultSelect="[defaultSelect]" //这里就是二维数组，没有错
  v-model="value"
  multiple
  placeholder="请选择"
>
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
    :disabled="defaultSelect.includes(item.value)"
  >
  </el-option>
</el-select>

value: ['选项1', '选项2', '选项3'],
options: [
  { label: '选项1', value: '选项1' },
  { label: '选项2', value: '选项2' },
  { label: '选项3', value: '选项3' },
  { label: '选项4', value: '选项4' },
  { label: '选项5', value: '选项5' },
],
defaultSelect: ['选项1', '选项2', '选项3'],