如何在Vuetify中使用readonly属性且仍允许查看下拉选项

你的需求是禁止修改选中项，但允许用户打开下拉菜单查看可选内容，而Vuetify的readonly属性会完全禁用组件的交互（包括下拉触发），所以不能直接用它实现。可以通过以下方式替代：

方案：移除readonly，自定义控制修改权限+模拟只读样式 #

1. 修改模板代码 #

移除:readonly绑定，添加@change监听和自定义样式类：

<v-autocomplete
  v-model="programModel"
  multiple
  density="compact"
  variant="outlined"
  hide-details
  color="primary"
  flat
  rounded
  label="Programs"
  :items="programData"
  item-title="program_name"
  return-object
  :rules="arrayRequiredRule"
  @change="handleProgramChange"
  :class="{ 'readonly-autocomplete': !editableTopSectionModel }"
>
  <template v-slot:selection="{ item, index }">
    <span v-if="!index">{{ item.title }}</span>
    <span class="grey--text caption" v-else-if="index === 1">
      &nbsp;(+ {{programModel!.length - 1}} others)
    </span>
  </template>
</v-autocomplete>

2. 添加逻辑控制修改权限 #

在脚本中监听状态变化，保存原始选中值，不可编辑时重置修改：

import { watch, ref } from 'vue';

// 基于Composition API示例，可根据实际代码风格调整
const programModel = ref([]);
const editableTopSectionModel = ref(false);
let originalSelectedPrograms = [];

// 切换到不可编辑状态时，保存当前选中值
watch(editableTopSectionModel, (isEditable) => {
  if (!isEditable) {
    originalSelectedPrograms = [...programModel.value];
  }
});

// 拦截选中项修改，不可编辑时强制重置回原始值
const handleProgramChange = () => {
  if (!editableTopSectionModel.value) {
    programModel.value = [...originalSelectedPrograms];
  }
};

3. 添加样式模拟只读视觉效果 #

通过CSS让组件呈现只读状态，同时保留下拉按钮的交互能力：

.readonly-autocomplete .v-input__control {
  pointer-events: none; /* 阻止输入框区域的点击交互 */
  opacity: 0.7; /* 降低透明度，模拟只读视觉表现 */
}
.readonly-autocomplete .v-input__append-inner {
  pointer-events: auto; /* 单独放行下拉按钮的点击 */
}

原理说明 #

• 移除readonly后，组件默认可以正常触发下拉菜单
• 通过@change事件拦截修改操作，不可编辑时强制重置回原始选中值
• 自定义CSS既保证了只读的视觉表现，又保留了下拉按钮的可点击性

内容的提问来源于stack exchange，提问作者Qiuzman