如何以动态方式调用计算的 属性？

Question

我想动态设置 Ant Design Vue 按钮的样式（在 Ant Design table 的 table 行内）：

<template #status="{ text }">
  <a-button ghost 
    :style="{'border-color': getColor(text) }">
  </a-button>
</template>

这是我计算的 属性（在脚本部分）：

const getColor = computed((status) => {
  let color = '';
  switch(status) {
    case 'StatusA':
      color = '#F97316';
      break;
    case 'StatusB':
      color = '#EC4899';
      break;
    case 'StatusC':
      color = '#8B5CF6'
      break;
    case 'StatusD':
      color = '#16A34A';
      break;
    default:
      color = "#5685EE";
  }
  return color;
})

但它不起作用。 错误：这个表达式不是 callable.Type 'String' has no call signatures 我该怎么做呢？ 谢谢

Answer 1

尝试在选项 API 中使用计算 属性，方法是返回一个将状态作为参数的函数：

setup(){
...
},
computed:{

 getColor(){
   return (status)=>{
   let color = '';
   switch(status) {
    case 'StatusA':
      color = '#F97316';
      break;
    case 'StatusB':
      color = '#EC4899';
      break;
    case 'StatusC':
      color = '#8B5CF6'
      break;
    case 'StatusD':
      color = '#16A34A';
      break;
    default:
      color = "#5685EE";
  }
   return color;
 }

 }
}

或者只使用设置中的函数：

const getColor = (status) => {
  let color = '';
  switch(status) {
    case 'StatusA':
      color = '#F97316';
      break;
    case 'StatusB':
      color = '#EC4899';
      break;
    case 'StatusC':
      color = '#8B5CF6'
      break;
    case 'StatusD':
      color = '#16A34A';
      break;
    default:
      color = "#5685EE";
  }
  return color;
}