Ant Design Vue中Select组件指定选项禁用失效问题：异步校验函数不生效排查

这个问题我之前也踩过坑，核心原因是异步函数的返回值特性——你直接把异步函数的调用结果和字符串'disabled'做比较，其实是在拿一个Promise对象和字符串对比，永远不会相等，所以:disabled属性一直是false，自然看不到选项被禁用的效果。

为什么异步函数不行？ #

用async标记的函数，不管你内部return什么值，它的实际返回结果都是一个Promise实例。当Vue渲染<a-select-option>时，会立即计算:disabled="check_function(test.id) == 'disabled'"这个表达式：

• 此时check_function(test.id)返回的是一个未完成的Promise，不是你期望的"disabled"字符串；
• 哪怕后续Promise成功resolve并返回"disabled"，Vue的响应式系统也不会自动重新计算这个表达式，因为它没有监听Promise的状态变化。

这就是为什么控制台能打印"disabled"，但页面上选项没被禁用的原因——判断条件从一开始就不成立。

为什么同步函数可以？ #

同步函数会直接返回"disabled"字符串，此时表达式check_function(test.id) == 'disabled'的结果是true，:disabled属性生效，所以选项会被禁用。

正确的解决方案 #

你需要把异步获取的禁用状态提前缓存好，让Vue的响应式系统能跟踪到状态变化，推荐两种方案：

方案1：组件挂载时预加载所有选项的禁用状态

在组件挂载阶段，批量获取每个test的状态，把禁用状态直接存在tests数组的每个对象里，这样渲染时直接读取即可：

async mounted() {
  // 假设你已经获取了基础的tests列表
  for (const test of this.tests) {
    await this.$store.dispatch("fetch_test", test.id);
    const save = this.$store.getters.get_test();
    // 给每个test对象添加disabled属性，Vue会自动监听这个响应式属性
    test.disabled = save.length === 0;
  }
}

然后修改模板：

<a-select @change="onTestChanged" :value="currentTestId" > 
  <a-select-option 
    v-for="test in tests" 
    :key="test.id" 
    :value="test.id" 
    :disabled="test.disabled"
  > 
    {{ test.testName }} 
  </a-select-option> 
</a-select>

方案2：用计算属性结合store缓存状态

如果你的store已经缓存了每个test的状态（推荐添加一个按id获取的getter），可以用计算属性动态生成带禁用状态的选项列表：

// 先在store的getters里添加按id获取的方法
getters: {
  get_testById: (state) => (id) => {
    return state.tests.find(test => test.id === id) || [];
  }
}

// 然后在组件的computed里处理
computed: {
  testsWithDisabled() {
    return this.tests.map(test => {
      const save = this.$store.getters.get_testById(test.id);
      return {
        ...test,
        disabled: save.length === 0
      };
    });
  }
}

模板里改成遍历testsWithDisabled：

<a-select @change="onTestChanged" :value="currentTestId" > 
  <a-select-option 
    v-for="test in testsWithDisabled" 
    :key="test.id" 
    :value="test.id" 
    :disabled="test.disabled"
  > 
    {{ test.testName }} 
  </a-select-option> 
</a-select>

注意事项 #

千万不要在模板的属性绑定里直接调用异步函数，这样不仅得不到正确的结果，还会在组件每次渲染时重复发起异步请求，严重影响性能。

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