2

我想动态设置 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;
})

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

4

1 回答 1

0

通过返回一个将状态作为参数的函数,尝试在选项 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;
}
于 2022-01-16T07:18:49.780 回答