方案
绑定的内容随disabled变化。删除绑定内容，再恢复非disabled状态时，不会残留影子在页面上。
<template><div><el-switch v-model="disabled" active-text="禁用" inactive-text="启用" /><el-autocompletev-model="model":fetch-suggestions="querySearch":disabled="disabled"placeholder="请输入内容"
value-key="name"@select="handleSelect"/></div>
</template><script setup>
import { ref, watch,computed } from 'vue';const disabled = ref(false);
// 输入框中显示的值
const model = computed(()=>{
get:()=>{
return selectValue.value;
},
set:(newValue)=>{
selectValue.value=newValue;
form[fieldName]=findCodeByName({name:newValue})
}});
const findCodeByName()=>{}
const findNameByName()=>{}
const selectValue = ref(findNameByCode({code:curForm.value[fieldName]}))// 实际绑定的 code 值const list = ref([{ code: '01', name: '一' },{ code: '02', name: '二' },{ code: '03', name: '三' }
]);const querySearch = (queryString, cb) => {let result = list.value;if (queryString) {result = list.value.filter(item => item.name.includes(queryString));}else if(!querykString){return list.vlue}cb(result);
};const handleSelect = (item) => {// 选择后输入框显示 nameinputValue.value = item.name;// 选择后将 code 赋值给绑定变量selectedCode.value = item.code;
};// 监听输入框的值变化，如果手动清空输入框，重置绑定的 code 值
watch(()=>curForm.value[fieldName], (newVal) => {
//点击无此类情况时，表单会清空，表单清空如果没有watch还会显示旧值，所以监听form的值的变化
//适时改变selectif (newVal==='') {selectValue.value = '';}
});
</script><style scoped>
/* 解决点击 disabled 瞬间文字颜色变浅的问题 */
.el-input {--el-disabled-text-color: #000;
}
</style>这是一个目前实现了的方案。文中的代码有些混乱，请理解精华部分及主题思想即可。
