elementUI禁止删除带有默认值得多选下拉

    <template>
    <div class="select">
      <el-select v-model="value1" multiple placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :disabled="item.disabled"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
  </template>

<script>
export default {
    name: "Select",
    data() {
      return {
        value1: ["选项1", "选项5"],
        options: [
          {
            value: "选项1",
            label: "黄金糕",
          },
          {
            value: "选项2",
            label: "双皮奶",
          },
          {
            value: "选项3",
            label: "蚵仔煎",
          },
          {
            value: "选项4",
            label: "龙须面",
          },
          {
            value: "选项5",
            label: "北京烤鸭",
          },
        ],
      };
    },
    created() {
      this.options.forEach((item) => {
        this.value1.forEach((val) => {
          if (item.value === val) {
            item.disabled = true;
          }
        });
      });
    },
  };
</script>

<style lang="scss" >
  .select {
    /deep/ .el-select {
      .el-select__tags {
        i {
          display: none;
        }
      }
    }
  }
</style>

附图如下:

思路 :

• element下选择器中tag内的i标签显示修改
• 禁用被请求回来的下拉选项从而达到不被删除的效果