如何使用 Ant Design Vue 禁用 Select 中的特定元素？

Posted 2023-02-23

【中文标题】如何使用 Ant Design Vue 禁用 Select 中的特定元素？

【英文标题】：How can i disable a specific element in a Select with Ant Design Vue?

【发布时间】：2021-08-26 14:55:46

【问题描述】：

我正在尝试禁用 a-select 的特定元素。 为此，我有一个函数“check_function”，当我想禁用一个元素时，我会返回字符串“disabled”。 我有

      <a-select @change="onTestChanged" :value="currentTestId" >
        <a-select-option 
          v-for="test in tests" v-bind:key="test.id"
          :value="test.id" 
          :disabled="check_function(test.id) == 'disabled'"
        >
           test.testName 
        </a-select-option>
      </a-select>

当函数“check_function”返回“disabled”时，我想禁用我的 a-select 中的一个元素。

async check_function(id) 
  await this.$store.dispatch("fetch_test", id)
  var save = this.$store.getters.get_test()
  if (save.length == 0) 
    console.log("disabled")
    return "disabled"
  
,

基本上，当我检查 console.log 时，它的工作条件。当我想禁用一个元素时，它会打印“disabled”。

但我的残疾人无法正常工作。当我在前面检查我的 a-select 时，什么都没有发生

当我在做的时候

check_function(id) 
  return "disabled"
,

我选择的所有元素都被禁用。

那么，为什么它不适用于第一种方式？

【参考方案1】：

不是答案，而是一些调试技巧

检查save是否为空。 这将有助于确保至少您不会因为“保存”变量未定义或为空而错过 if 检查。

async check_function(id) 
  await this.$store.dispatch("fetch_test", id)
  var save = this.$store.getters.get_test()
  if (!save || save.length == 0) 
    console.log("disabled")
    return "disabled"
  
,

在进行 if 检查之前检查它是否返回 null。 这应该正确禁用所有。如果没有，那就有问题了

async check_function(id) 
  await this.$store.dispatch("fetch_test", id)
  return "disabled"

【讨论】：

基本上，当我有我的异步功能时，它不起作用，但是当我删除异步和等待时（并且只将返回“禁用”，它正在工作）。所以我不知道为什么，但是异步不要让我做一个“禁用”