Vue自定义指令——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>

main.js

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)
    }
  }
})
————————————————
版权声明：本文为CSDN博主「丶扁扁的糖是扁的」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/sugerinaflat/article/details/125339457