el-select编辑时已选择的项不允许删除(多选)

defaultSelect.js 

目录

 代码：

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

 

 

注册组件

main.js引入

 

 

使用：

energyListId： 已选择的id集合

<el-select v-model="energyListId" placeholder="请选择维修设备" multiple
                         filterable :clearable="false"
                         @change="changeEnergy" style="width: 90%;"
                         v-default-select="[energyListId,energyListId]"
                         @keydown.native.delete.capture.stop.prevent
              >
                <el-option
                  v-for="item in energyList"
                  :key="`p_${item.id}`"
                  :checked="item.checked"
                  :disabled="item.disabled"
                  :label="`${item.deviceName}(${item.deviceNo})`"
                  :value="item.id"
                >
                </el-option>
              </el-select>