关于a-select下拉框回显时短暂显示id的情况以及下拉框有数据但无法选中的问题的解决方案

问题描述

a-select下拉框回显时短暂显示id，而后显示name

<a-form-model-item label="选择类型">
  <a-radio-group v-model="tagProtraitAdd.subType" button-style="solid" @change="radioChange">
    <a-radio-button value="tag">
      标签
    </a-radio-button>
    <a-radio-button value="protrait">
      画像
    </a-radio-button>
  </a-radio-group>
  </a-form-model-item>
  <div v-if="tagProtraitAdd.subType === 'tag'" >
    <a-form-model-item label="请选择对象" prop="pid">
      <a-select v-model="tagProtraitAdd.pid" placeholder="请选择标签对象" @change="handlePidChange">
        <a-select-option v-for="obj in objects" :key="obj.id" :label="obj.name" :value="obj.id">
          {{obj.name}}
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item label="请选择标签"  prop="tid">
      <a-select v-model="tagProtraitAdd.tid" placeholder="请选择标签">
        <a-select-option v-for="item in tagsArr" :key="item.id" :label="item.name" :value="item.id">
          {{item.name}}
        </a-select-option>
      </a-select>
    </a-form-model-item>              
  </div>

  <a-form-model-item v-if="tagProtraitAdd.subType === 'protrait'" label="请选择画像">
    <a-select v-model="tagProtraitAdd.pid" placeholder="请选择画像" @change="refreshData">
      <a-select-option v-for="(obj,index) in protraits" :key="index" :value="obj.id">
        {{obj.name}}
      </a-select-option>
    </a-select>
  </a-form-model-item>

  computed: {
    tagsArr() {
        if (!this.tagProtraitAdd.pid) {
          return [];
        }else{
          const matchedTags = this.objects.find(item => item.id === this.tagProtraitAdd.pid)?.tags;
          return matchedTags || [];
        }
    }
  },



    async updateTagFactoryObject(record) {
      this.objects = [];
      TagFactorySvr.objects().then(ret=>{
        _.each(ret,(re)=>re.tags = []);
        _.each(ret,async (re)=> {
          re.checked = false;
        });
        this.objects = ret;
        _.each(ret,async (re)=>{
          var tags = await TagFactorySvr.tags(re.id);
          _.each(tags,(tag)=>tag.checked = false);
          re.tags = tags;
        });
      });
      this.protraits = [];
      TagFactorySvr.groups().then(ret=>{
        _.each(ret,(re)=>{re.checked=false;});
        this.protraits = ret;
      });
      let res = await knowledge_base.tfget(record.id)
      this.tagProtraitAdd = _.cloneDeep(res)
      //......其他代码

    },

---

原因分析：

如果编辑时调接口等异步操作，而表单绑定的下拉框需要依赖于异步操作返回的多个结果时，考虑数据的异步加载问题 ，确保在选项渲染之前，tagProtraitAdd.tid的值已经正确设置为对应的value值或为空。确保在数据加载完成之前，tagProtraitAdd.tid的值不会影响选项渲染。

---

解决方案：

在调用接口之前加上一个await

    async updateTagFactoryObject(record) {
      this.objects = [];
      await TagFactorySvr.objects().then(ret=>{
        _.each(ret,(re)=>re.tags = []);
        _.each(ret,async (re)=> {
          re.checked = false;
        });
        this.objects = ret;
        _.each(ret,async (re)=>{
          var tags = await TagFactorySvr.tags(re.id);
          _.each(tags,(tag)=>tag.checked = false);
          re.tags = tags;
        });
      });
      this.protraits = [];
      await TagFactorySvr.groups().then(ret=>{
        _.each(ret,(re)=>{re.checked=false;});
        this.protraits = ret;
      });
      let res = await knowledge_base.tfget(record.id)
      //......后续代码
    },

 问题描述

        由于在此项目中，选择对象和选择画像都绑定的表单中的pid，这样在数据回显的时候切换类型会导致回显出不属于自己数据的情况，所以将画像的表单绑定成了hxpid作为区分，但是下拉框却无法选中数据了

<a-form-model-item label="选择类型">
  <a-radio-group v-model="tagProtraitAdd.subType" button-style="solid" @change="radioChange">
    <a-radio-button value="tag">
      标签
    </a-radio-button>
    <a-radio-button value="protrait">
      画像
    </a-radio-button>
  </a-radio-group>
  </a-form-model-item>
  <div v-if="tagProtraitAdd.subType === 'tag'" >
    <a-form-model-item label="请选择对象" prop="pid">
      <a-select v-model="tagProtraitAdd.pid" placeholder="请选择标签对象" @change="handlePidChange">
        <a-select-option v-for="obj in objects" :key="obj.id" :label="obj.name" :value="obj.id">
          {{obj.name}}
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item label="请选择标签"  prop="tid">
      <a-select v-model="tagProtraitAdd.tid" placeholder="请选择标签">
        <a-select-option v-for="item in tagsArr" :key="item.id" :label="item.name" :value="item.id">
          {{item.name}}
        </a-select-option>
      </a-select>
    </a-form-model-item>              
  </div>

  <a-form-model-item v-if="tagProtraitAdd.subType === 'protrait'" label="请选择画像">
    <a-select v-model="tagProtraitAdd.hxpid" placeholder="请选择画像" @change="refreshData">
      <a-select-option v-for="(obj,index) in protraits" :key="index" :value="obj.id">
        {{obj.name}}
      </a-select-option>
    </a-select>
  </a-form-model-item>

    async updateTagFactoryObject(record) {
      this.objects = [];
      TagFactorySvr.objects().then(ret=>{
        _.each(ret,(re)=>re.tags = []);
        _.each(ret,async (re)=> {
          re.checked = false;
        });
        this.objects = ret;
        _.each(ret,async (re)=>{
          var tags = await TagFactorySvr.tags(re.id);
          _.each(tags,(tag)=>tag.checked = false);
          re.tags = tags;
        });
      });
      this.protraits = [];
      TagFactorySvr.groups().then(ret=>{
        _.each(ret,(re)=>{re.checked=false;});
        this.protraits = ret;
      });
      let res = await knowledge_base.tfget(record.id)
      if (res.subType==='tag') {
        this.tagProtraitAdd = _.cloneDeep(res)
      }else{
        this.tagProtraitAdd = _.cloneDeep(res)
        this.tagProtraitAdd.tid = undefined
        this.tagProtraitAdd.pid = undefined
        this.tagProtraitAdd.hxpid = res.pid
      }
      //.....其他代码...
    },

---

解决方案：

加一个 change 的事件强制刷新~

<a-form-model-item v-if="tagProtraitAdd.subType === 'protrait'" label="请选择画像">
  <a-select v-model="tagProtraitAdd.hxpid" placeholder="请选择画像" @change="refreshData">
    <a-select-option v-for="(obj,index) in protraits" :key="index" :value="obj.id">
      {{obj.name}}
    </a-select-option>
  </a-select>
</a-form-model-item>    

refreshData(){
  this.$forceUpdate()
},