基于条件为Grid.js表格列设样式时出现NaN问题求助

问题根源 #

1. 模板字符串语法错误：你在html模板里错误混用字符串拼接符+与模板字符串语法，导致样式解析失败，出现NaN。
2. 数据与字段不匹配：当前data中无amount字段，且formatter的cell参数是当前列（Name列）的单独数据，并非整行数据，因此cell.amount会返回undefined，触发NaN问题。

修正后的完整代码 #

const grid = new Grid({
  columns: [
      { 
        name: 'Name',
        formatter: (cell, row) => {
          // 从整行数据中获取amount，判断颜色
          const textColor = row.amount === '全额' ? 'green' : 'red';
          return html(`<b style='color: ${textColor}'>${cell}</b>`);
        }
      },
      'Email',
      { 
        name: 'Actions',
        formatter: (_, row) => html(`<a href='mailto:${row.cells[1].data}'>Email</a>`)
      },
      { name: 'Amount' } // 可选：显示amount列，直观查看状态
   ],
  data: Array(5).fill().map(x => ({
    // 改用对象结构存储数据，字段对应更清晰
    Name: faker.name.findName(),
    Email: faker.internet.email(),
    amount: Math.random() > 0.5 ? '全额' : '部分' // 模拟随机的金额状态
  }))
});

核心修正说明 #

• 模板字符串正确使用：用${变量/表达式}插入动态内容，替代错误的+拼接写法。
• 正确获取amount字段：通过formatter的第二个参数row获取整行数据，从而拿到amount状态值。
• 优化数据结构：将原数组形式的数据改为对象结构，避免索引混乱，字段对应关系更明确。

内容的提问来源于stack exchange，提问作者ghost_of_the_code