el-autocomplete实现输入搜索时依据 name 进行搜索，选择后绑定 code 的功能

方案

绑定的内容随disabled变化。删除绑定内容，再恢复非disabled状态时，不会残留影子在页面上。

<template>
  <div>
    <el-switch v-model="disabled" active-text="禁用" inactive-text="启用" />
    <el-autocomplete
      v-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) => {
  // 选择后输入框显示 name
  inputValue.value = item.name;
  // 选择后将 code 赋值给绑定变量
  selectedCode.value = item.code;
};



// 监听输入框的值变化，如果手动清空输入框，重置绑定的 code 值
watch(()=>curForm.value[fieldName], (newVal) => {
//点击无此类情况时，表单会清空，表单清空如果没有watch还会显示旧值，所以监听form的值的变化
//适时改变select
  if (newVal==='') {
    selectValue.value = '';
  }
});
</script>

<style scoped>
/* 解决点击 disabled 瞬间文字颜色变浅的问题 */
.el-input {
  --el-disabled-text-color: #000;
}
</style>

这是一个目前实现了的方案。文中的代码有些混乱，请理解精华部分及主题思想即可。