如何以动态样式调用计算属性？答案

【问题标题】：How to call a computed property in dynamic style?如何以动态样式调用计算属性？
【发布时间】：2022-01-16 07:14:34
【问题描述】：

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

<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;
})

但它不起作用。错误：此表达式不可调用。类型“字符串”没有调用签名我该怎么做呢？谢谢。

【问题讨论】：

标签： vue.js ant-design-vue

【解决方案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;
}

【讨论】：