element ui 下拉选只读

在Element UI的下拉多选框`el-select`中实现默认值不可删除的功能，通常意味着设置其为只读状态。这可以通过调整组件选项的属性来完成。下面是如何做到这一点的一个示例：

<template>
  <el-select v-model="selectedValues" readonly :disabled="isDisabled">
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValues: ['defaultOptionValue'], // 默认选择的值
      options: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        // ...
      ],
      isDisabled: false, // 初始时禁用删除操作
    };
  },
  methods: {
    handleDelete(value) {
      if (this.isDisabled || !this.selectedValues.includes(value)) {
        // 如果已禁用或该值不在当前选择中，则不执行删除
        console.log('Delete operation disabled');
      } else {
        this.selectedValues = this.selectedValues.filter(item => item !== value);
      }
    },
  },
};
</script>

在这个例子中，`v-model`绑定的是`selectedValues`，表示选中的值。通过`readonly`属性设置了下拉框为只读模式，而`disabled`属性控制了全局的删除操作。当`isDisabled`为`true`时，`handleDelete`方法不会执行删除操作。