1、效果图

2、代码

2.1、在main.js里增加自定义指定

// 自定义指令，解决el-select默认值不可删除问题
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);
    }
  },
});

2.2、使用

<el-select
  style="width: 100%"
  v-defaultSelect="[typeDefault]"
  filterable
  multiple
  placeholder="请选择教师类型"
  v-model="ruleForm.teacherTypes"
  :disabled="disabled"
  @change="typeChange">
  <el-option
    v-for="item of this.curTeacherTypeList"
    :key="item.roleId"
    :label="item.roleName"
    :value="item.roleId"
    :disabled="item.disabled">
  </el-option>
</el-select>

v-defaultSelect 自定义指定，值为默认选中的id

结语：作为女程序员的职业之路是什么样的呢？工作时间越久，职业危机约重(눈_눈)