根据条件将样式插入 javascript

Question

我正在使用 grid.js 将一些数据放入表中。

在一列中，我有一个图标，我希望它根据我通过的条件改变颜色，如下所示。

style='color: " + cell.amount ? + " 'green' " : " 'red' '

具体来说，我希望金额已满时为绿色，否则为红色。

我遇到了问题；我注意到列中显示了 NaN。

有人可以帮助我吗？

const grid = new Grid({
  columns: [
      { 
        name: 'Name',
        formatter: (cell) => html(`<b style='color: " + cell.amount ? + " 'green' " : " 'red' '>${cell}</b>`)
      },
      'Email',
      { 
        name: 'Actions',
        formatter: (_, row) => html(`<a href='mailto:${row.cells[1].data}'>Email</a>`)
      },
   ],
  data: Array(5).fill().map(x => [
    faker.name.findName(),
    faker.internet.email(),
    null
  ])
});

Answer 1

您有不需要的额外引号。

由于您使用的是模板文字，因此您可以用

${...}

代替它，而不是串联。

formatter: (cell) => html(`<b style='color: ${cell.amount ? "green" : "red"}'>${cell}</b>`)