javascript 需要根据数据更改颜色,我的类：getColor()工作不正确

ggazkfy8 于 2023-01-04 发布在 Java

关注(0)|答案(1)|浏览(106)

在数据表中有两列状态和优先级。状态列表是打开或关闭，优先级列表是高，中，低。因此，如果状态是打开，它应该是红色，关闭，然后绿色，如果优先级是高，然后深蓝色，低-警告颜色和中等-信息颜色。
[![在此输入图像说明][1]][1]
状态列颜色显示，但优先级列不工作。
HTML模板-

<v-data-table
  :headers="headers"
  :items="searchFilterArray"
  disable-pagination
  :hide-default-footer="true"
>
           
    <template v-slot:item.status="{ item }">
      <span :class="getColor(item.status)">
        {{ item.status }} // status can be open or closed
      </span>
    </template>
    <template v-slot:item.priority="{ item }">
      <span :class="getColor(item.priority)">
        {{ item.priority }} // priority can be High,Moderate or Low
      </span>
    </template>
</v-data-table>

methods: {
    getColor (status) {
      console.log('status is : ', status) // In console only open and closed are getting printed. Not sure why Low and High are not going as per screenshot.
      if (status === 'closed') return 'v-green font-weight-bold'
      else if (status === 'open') return 'v-error font-weight-bold'
      else if (status === 'High') return 'v-darkblue font-weight-bold'
      else if (status === 'Low') return 'v-warning font-weight-bold'
      else if (status === 'Moderate') return 'v-info font-weight-bold'
      else return 'v-secondary '
    },
 }

JavaScript

来源：https://stackoverflow.com/questions/74990689/need-to-change-colour-based-on-data-my-classgetcolor-is-not-working-correct

1条答案

按热度按时间

erhoui1w1#

您可以传递一个包含您的条件的对象：

getColor (status) {
    return {
      'v-green font-weight-bold': status === 'closed',
      'v-error font-weight-bold': status === 'open',
      'v-darkblue font-weight-bold': status === 'High',
      'v-warning font-weight-bold': status === 'Low',
      'v-info font-weight-bold': status === 'Moderate',
      // You perhaps need to be more specific with this one 
      // for example with a 
      // !['closed', 'open', 'High', 'Low', 'Moderate'].includes(status)
      'v-secondary': !status
    }
}

你不需要使用if/else来返回正确的类，vue会根据布尔值来决定放入哪些类
然而，我不认为这是你的问题，因为似乎你的console.log没有输出这些值，所以你的方法没有被调用，也许是插槽问题，你的插槽实际上被使用了吗？
也许您的列实际上并没有被称为priority，因此它不起作用，即使您的标题显示它是priority列，对象上的实际字段也可能是order之类的其他字段
如果您的字段实际上是priority.name，则需要更改模板：

<template v-slot:item.priority.name="{ item }">
  <span :class="getColor(item.priority.name)">
    {{ item.priority.name }} // priority can be High,Moderate or Low
  </span>
</template>

目前发生的情况是，您的插槽与字段不匹配，vuetify没有调用。

赞(0）回复(0）举报 2023-01-04

我来回答

javascript 需要根据数据更改颜色,我的类：getColor()工作不正确

1条答案

相关问题

热门标签

最新问答