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

这篇具有很好参考价值的文章主要介绍了在element UI的下拉多选框里如何实现禁用默认值和不可删除默认值。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

在做到默认值不能删除这部分时，我看大部分都是在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个月，可能或许实现的方式有些不好，希望能对大家有所帮助，当然，如果有大佬有更好的实现方式，希望可以交流指正，我目前只掌握了这种实现方式。文章来源地址https://www.toymoban.com/news/detail-690161.html

到了这里，关于在element UI的下拉多选框里如何实现禁用默认值和不可删除默认值的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！