在element UI的下拉多选框里如何实现禁用默认值和不可删除默认值

移动到默认值上会变成禁用的图标，点击没有反应。

在做到默认值不能删除这部分时，我看大部分都是在main,js里定义一个自定义指令,我没有用自定义指令，可以说我的方法非常原始？就是笨办法吧，下面是我的解决方法。

1、首先，肯定要在data里定义一个数组，专门存放默认值，

 clone_material_ids: [],

2、在请求成功后把返回的值克隆，也就是给到这个数组

  this.clone_material_ids = this.summaryForm.material_ids

3、这是我的页面布局代码，我在这里加了 @remove-tag="removeTag"实现默认值不可删除

:disabled="isDisabled(option.materialId)"默认值在下拉框中是禁用的

 <el-form-item label="选择物料" :rules="[{ required: true, message: '请选择物料', 
              trigger: 'blur' },]">
       <el-select v-model="updateForm.material_ids" placeholder="请选择物料" multiple 
                  filterable style="width: 100%;"
                  @remove-tag="removeTag" >
           <el-option v-for="option in materialList" :key="option.materialId" 
                     :label="option.materialName"
                     :value="option.materialId" :disabled="isDisabled(option.materialId)">
           </el-option>
         </el-select>
  </el-form-item>

4、是否为默认值，true则禁用

 isDisabled(val) {
      return this.clone_material_ids.includes(val)
    },

5、默认值不可删除，我实现的思路是点击删除时，把默认值在加到默认值对应的位置上，就是可已在判断是默认选项后，拿到该值在备份数组中的下标，然后将该值，插入到你v-model绑定的数组中，注意是插入，不是覆盖。还可以加一个message进行提示

 removeTag(val) {
      if (this.clone_material_ids.includes(val)) {
        let defaultIndex = this.clone_material_ids.indexOf(val) // 获取默认值在数组中的下标
        this.updateForm.material_ids.splice(defaultIndex, 0, val) // 将要删除的值插入到默认值对应的下标位置
        // this.updateForm.material_ids.push(val)
        return false
      } else {
        return true
      }
    },

我一开始用的// this.updateForm.material_ids.push(val)这个，因为刚写没有思路，这个也可以实现默认值不可删除的效果，位置是不可控的。

以上是我个人在做实际项目中遇到的问题，我的实际开发经验也才3个月，可能或许实现的方式有些不好，希望能对大家有所帮助，当然，如果有大佬有更好的实现方式，希望可以交流指正，我目前只掌握了这种实现方式。